javascript - jQuery 验证按钮样式在提交时更改

Question

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

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

可以看到live版here我使用的插件是 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/