Question

我正在关注此处的演示

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

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

更新

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

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

此致

Answer 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选项可以解决问题。

Answer 2

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

CSS

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

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

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>

jQuery Validation插件 - 如何在出错时更改css

3 个答案:

CSS