jQuery验证插件 - 如何在错误时更改CSS

Question

我正在按照这里的演示进行操作：

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

在提交表单时，如果字段为空，输入框和其他字段是如何获得红色边框的？我需要添加什么内容到我的插件声明中才能实现这个效果？

更新

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

我知道如何通过 CSS 获取边框，但我需要知道验证插件如何更改 CSS。

谢谢

- vikmalhotra

Answer 1

这就是我完成我想要的东西的方法...

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

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

- vikmalhotra

Answer 2

像这样就可以做到...

CSS

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

在这种情况下，Firebug是您的好帮手。

- alex

---

谢谢你的提示，但我需要知道在验证插件声明中更改哪些内容才能更改输入字段的CSS。 - vikmalhotra

@ShiVik，你不应该直接使用JavaScript添加CSS。因此我怀疑该插件是否提供了这个选项。 - alex

你的意思是我不应该这样做 - $(this).addClass('error'); 吗？无论如何，我找到了我要找的选项。 - vikmalhotra

@ShiVik 添加一个类与直接更改CSS属性是不同的。 - alex

好的。 :) 有些误解了你的评论。该插件确实没有直接更改 CSS 属性的选项，但它确实提供了 highlight 和 unhighlight 方法来完成这个任务。 - vikmalhotra

Answer 3

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

例如：

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

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

- Calvin

---

我正在使用 jQuery 验证插件进行表单验证。因此，我希望使用验证器插件来更改此 CSS，而不是使用普通的 jQuery 事件。 - vikmalhotra

在这种情况下，我建议阅读此处的文档：http://docs.jquery.com/Plugins/Validation - Calvin