提交时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相关的内容。任何和所有的帮助表示赞赏！

非常感谢，

西奥

P.S。在我发布之前的最后一分钟仔细检查。只有在底部字段（密码）无效时才会发生这种情况。如果只是电子邮件字段无效，则不会发生样式更改。

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/