jquery - 验证失败时更改输入名称和错误消息的颜色

Question

我正在使用 jQuery 验证，但在更改错误消息的颜色和输入字段名称时遇到问题。我尝试仅使用 CSS，代码如下:

#news_action input.error {
  color: red;
}

但这只会改变输入字段文本的颜色。如何使用 CSS 选择输入字段名称和错误消息？如果有人有不使用 CSS 的其他解决方案，我们非常欢迎。 谁能帮我？ 提前致谢

这是我的 html:

<div class="info">
  Type your name:<input id="input-name" type="text" name="name"/> <br>
  Type your email:<input type="text" name="email"/>
</div>

Answer 1

你需要将每个输入控件和它的标签包装在一个容器中，然后你可以使用highlight和unhighlight方法将错误类添加到容器中

jQuery(function ($) {
    var validator = $('#news_action').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {},
        highlight: function (element) {
            $(element).parent().addClass('error')
        },
        unhighlight: function (element) {
            $(element).parent().removeClass('error')
        }
    });
});

#news_action .error {
    color: red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="news_action" method="post" action="">
    <div class="info">
        <div>Type your name:<input id="input-name" type="text" name="name"/></div>
        <div>Type your email:<input type="text" name="email"/></div>
    </div>
    <input type="submit" class="button" value="Submit" />
</form>