jQuery驗證按鈕樣式在提交時發生變化

Question

我正在更新/設計網站，因此我使用了自定義提交按鈕來登錄表單。但是點擊提交時不帶任何有效輸入的造型完全改變其位置跳躍：

問題： http://test.theobaart.com/ReWork/loginIssue.png

真人版可以看出here，我使用的插件是jQuery驗證（jqueryvalidation。 ORG）

相關的代碼如下：

HTML：

<form id="createForm" method="post" action="create.php"> 

    <label for="email">Email</label> 
    <input id="email" type="email" name="email"/> 

    <label for="password">Password</label> 
    <input id="password" type="password" name="password"/> 

    <input class="submit" type="submit" value="Login"/> 
</form> 

個

CSS：

/* Login form stuff */ 
form { 
    width: 100%; 
    margin: 0 auto; 
} 

label, input { 
    display: inline-block; 
} 

label { 
    width: 30%; 
    text-align: right; 
} 

label + input { 
    width: 60%; 
    margin: 10px 0 10px 4%; 
} 
/* Styling for input button */ 
input + input { 
    width: 20%; 
    max-width: 100px; 
    margin: 0 40% 10px 40%; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0px; 
    font-family: Arial; 
    color: #a6afb9; 
    font-size: 21px; 
    background: #fffffff; 
    padding: 10px 10px 10px 10px; 
    border: solid #5f6f81 2px; 
    text-decoration: none; 
} 

input + input:hover { 
    background: #5f6f81; 
    text-decoration: none; 
} 
#loginForm div.error { 
    width: 100%; 
    text-align: center; 
    color: red; 
} 

超越進口jquery.validate.min.js我也用下面的腳本：

$("#loginForm").validate({ 
    errorElement: 'div', 
    rules: { 
     email:{required:true}, 
     password: {required: true} 
    } 
}); 

我有點送行無所適從，可能是什麼（所以爲什麼我問這裏）並且，據我所知，這不是一個普遍的問題，所以我一直無法找到任何與stackoverflow/google相關的內容。任何和所有的幫助表示讚賞！

非常感謝，

西奧

附：在我發佈之前，在最後一分鐘進行雙重檢查。這似乎只發生在底部字段（密碼）無效時。當它只是無效的電子郵件字段時，不會發生樣式更改。

Answer 1

我相信這個問題與你用於輸入樣式的css直接兄弟選擇器（+）有關。這樣做是選擇緊跟在另一個輸入元素之後的所有輸入。

/* Styling for input button */ 
input + input { 
    /* your styling */ 
} 

所以被提交表格之前，你的HTML看起來像下面，所以你的CSS似乎正常工作。提交按鈕正在被樣式化，因爲它直接跟在另一個輸入元素之後。

您提交表格後，jQuery驗證被插入一些節點在HTML之間：

按鈕不再稱呼，因爲你的CSS選擇器input + input不再適用於它。正如你所指出的那樣，只有在密碼字段不正確的情況下才會出現按鈕變爲無版式的問題，這與此一致。

你應該做的是隻使用一個CSS類樣式的按鈕，如：

HTML：

<input class="submit createButton" type="submit" value="Login" /> 

CSS：

.createButton { 
    width: 20%; 
    max-width: 100px; 
    margin: 0 40% 10px 40%; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0px; 
    font-family: Arial; 
    color: #a6afb9; 
    font-size: 21px; 
    background: #fffffff; 
    padding: 10px 10px 10px 10px; 
    border: solid #5f6f81 2px; 
    text-decoration: none; 
} 

的jsfiddle： http://jsfiddle.net/CQmGE/1/