jquery验证errorClass无法正常工作答案

【问题标题】：jquery validation errorClass not working properlyjquery验证errorClass无法正常工作
【发布时间】：2011-10-15 20:42:08
【问题描述】：

发生的情况是，当您只按“发送”时，只有消息正文文本框变成红色，这意味着 errorClass: 'errorField' 已按应有的方式应用于它，但其他元素不要变红，就像他们应该的那样。

此外，焦点正确地转到消息电子邮件文本输入，因此错误类可能也正确应用于此字段，但是当您将焦点更改为消息主题字段时，消息电子邮件字段应变为红色.

最后，如何让errorField类覆盖焦点类？

感谢您的帮助！

HTML：

    <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="style/message.css">
<script type="text/javascript">
    $(document).ready(function() {
        $("#message-form").validate({
        errorClass: 'errorField',
        errorPlacement: function(error,element) {
                       return true;
            }
        });
    });

</script>
</head>
<body>
    blue = focus, green=notFocus, red=error
<div id="message-wrapper">
    <form id="message-form" method="POST" action="">
        <table>
            <tr>
                <td width="70px"><label for="message-email">From:</label></td>
                <td><input type="text" name="message-email" id="message-email" class="message-input required email" /></td>
            </tr>
            <tr>
                <td><label for="message-subject">Subject:</label>  </td>
                <td><input type="text" name="message-subject" id="message-subject" class="message-input required" minlength="5"/></td>
            </tr>
            <tr>
                <td><label for="message-body" style="vertical-align: top">Message:</label>  </td>
                <td><textarea name="message-body" id="message-body" rows="4" cols="40" class="message-input required"></textarea></td>
            </tr>
        </table>

        <input type="hidden" name="contact" value="1" />

        <p><button type="submit">Send</button></p>
    </form>
</div>
</body>

CSS：

div#message-wrapper{
    width: 300px;
    height: 400px;
}
input[type="text"], textarea {
    /* background:#F4F4F4; */
    background: green;
    color: white;
    border: solid 2px #DFDFDF;
}
input[type="text"]:focus, textarea:focus {
    /* background:#F2F4F8; */
    background: blue;
    color: white;
    border:solid 2px #333;
    outline: 0;
}
.errorField{
    /* background:#faf6d1; */
    background: red;
    color:black;
    border:solid 1px #333;
}
.message-input{
    width: 341px;
}

【问题讨论】：

标签： jquery forms coding-style element validation

【解决方案1】：

选择器是问题：

input[type="text"] 比 .message-input 更具体，所以背景颜色不会改变
使用input.message-input:focus 代替input[type="text"]:focus 和input.message-input.errorField:focus 代替.errorField

【讨论】：