提交时jQuery Validation按钮样式更改

Question

我正在更新/样式网站，因此我在登录表单中使用了自定义提交按钮。 但是，在没有任何有效输入的情况下单击“提交”时，样式会完全更改，并且其位置也会跳变：

问题： http : //test.theobaart.com/ReWork/loginIssue.png

可以在此处看到实时版本，我正在使用的插件是jQuery Validation（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/