jQuery Validation 插件 - 如何在错误时更改 css答案

【问题标题】：jQuery Validation plugin - how to change css on errorjQuery Validation 插件 - 如何在错误时更改 css
【发布时间】：2010-10-25 02:14:13
【问题描述】：

我正在关注这里的演示

http://jquery.bassistance.de/validate/demo/marketo/

提交表单时，如果该字段为空，输入框和其他字段如何在它们周围出现红色边框？我必须在我的插件声明中添加什么来获得它？

更新

$("#profile_form").validate({
        rules: {
            nickname: "required",
            address: "required"
        },
        messages: {
            nickname: "(required)",
            address: "&nbsp;(required)"
        }
    });

我知道如何通过 css 获取边框，我需要知道 validate 插件如何更改 css。

问候

【问题讨论】：

标签： jquery validation jquery-validate

【解决方案1】：

这就是我实现我想要的东西的方式......

$("#profile_form").validate({
        rules: {
            nickname: "required",
            address: "required"
        },
        messages: {
            nickname: "(required)",
            address: "&nbsp;(required)"
        }, highlight: function(element) {
            $(element).addClass('error');
        }, unhighlight: function(element) {
            $(element).removeClass('error');
        }
    });

在 jquery.validate 插件中使用 highlight 和 unhighlight 选项可以解决问题。

【讨论】：

【解决方案2】：

这样的事情会做......

CSS

input.error,
select.error,
textarea.error {
    border: 3px solid red;
}

在这种情况下，Firebug is your friend。

【讨论】：

感谢您的提示，但我需要知道在验证插件声明中要更改什么以更改输入字段的 css。
@ShiVik 您不应该使用 JavaScript 直接添加 CSS。所以我怀疑这个插件会给你这个选项。
你的意思是我不应该这样做 - $(this).addClass('error'); ??无论如何，我找到了我正在寻找的选项。
@ShiVik 添加类与直接更改 CSS 属性不同。
对。 :) 有点误解了你的评论。该插件确实不提供直接更改 css 属性的选项，但它确实提供了方法 hightlight 和 unhighlight 来做到这一点。

【解决方案3】：

您可以将blur() 事件处理程序附加到输入框。在您的回调函数中，您将检查输入的内容，然后使用 css() 相应地更改 css。

例子：

<input type="text" id="myField" />

<script type="text/javascript">
    $("#myField).blur(function() {
        if ($(this).val() == "") {
            $(this).css("borderColor", "red");
        }
    });
</script>

【讨论】：

我正在使用 jquery validate 插件进行表单验证。所以，我希望使用验证器插件来更改这个 css，而不是使用普通的 jquery 事件。
在这种情况下，我建议阅读这里的文档：docs.jquery.com/Plugins/Validation