JQuery Validate - 在表单中添加/删除错误 css 类答案

【问题标题】：JQuery Validate - Add/remove error css class in the formJQuery Validate - 在表单中添加/删除错误 css 类
【发布时间】：2013-11-21 02:29:34
【问题描述】：

我想在表单中添加/删除error css 类。

$("#my-form").validate({
        invalidHandler: function (event, validator) {
            // 'this' refers to the form
            var errors = validator.numberOfInvalids();
            if (errors) {
                $(this).addClass("error");
            } else {
                $(this).removeClass("error");
            }
        },
});

这种方法的问题： 当我使用$("#my-form").validate().form() 验证表单时，它会自动将error css-class 添加/删除到每个控件，例如输入。通过添加invalidHandler，这还将添加/删除整个表单的error css-class。

一旦我使用validator.resetForm() 清除消息，这将从子控件而不是表单中重置 css 类。我希望它通过使用绑定或任何其他类型的触发此操作的处理程序自动从表单中删除 css 类（从表单中删除 css 类）。

我该如何解决这个问题？

来源：http://jqueryvalidation.org/validate/

更新这是一个愚蠢的例子：http://jsfiddle.net/F2Re4/ 我手动删除了这个类（在这个例子中，我调用了这个类：'error-form'）

【问题讨论】：

不确定你在做什么。默认情况下会自动添加和删除error 类。
这只会发生在我们正在验证的每个元素上，但不会发生在表单上。
我不知道你想要什么。创建一个 jsFiddle 演示，以便我可以解决这个问题。

标签： javascript jquery forms jquery-validate

【解决方案1】：

查看your jsFiddle的标记，

<input type="button" onclick="validate()" value="Validate"></input>
<input type="button" onclick="resetForm()" value="Reset Form"></input>

1) input 元素没有结束标签。它们可能需要也可能不需要“自动关闭”，具体取决于您的 doctype，但从来没有像 </input> 标记这样的东西。

2) 使用 jQuery 时，内联 JavaScript 是丑陋且不必要的。 onclick 处理程序可以轻松删除并替换为 jQuery .on('click')...

$('#reset').on('click', function () {
    var form = $("#myForm");
        form.validate().resetForm();
});

3) 您不需要将validate 函数附加到您的“验证”按钮。只需将按钮更改为type="submit" 即可自动验证。否则，您将需要另一个 .on('click') 处理程序和一个 .valid() 来触发验证测试。

<input type="submit" id="validate" value="Validate" />
<input type="button" id="reset" value="Reset Form" />

引用 OP：

...validator.resetForm() 来清除消息，但是这个invalidHandler 永远不会被调用并且'error' css 类仍然存在于表单中。

根据文档，invalidHandler 仅在表单无效时调用。如果您重置表格，表格将不再无效。因此，invalidHandler 中使用的逻辑是有缺陷的。

var errors = validator.numberOfInvalids();
if (errors) {
    $(this).addClass("form-error");
} else {
    // this will never be called because invalidHandler
    // is never called when there are no form errors
    //$(this).removeClass("form-error");
}

此插件中没有任何内容会自动添加/删除<form> 元素本身的类。该插件仅自动从各种数据输入元素中添加/删除类。因此，如果您手动将类添加到 <form> 元素，那么您将不得不在重置表单时手动将其删除。

$(document).ready(function () {

    $("#myForm").validate({
        // your rules & options
    });

    $('#reset').on('click', function () {
        var form = $("#myForm");
            form.validate().resetForm();    // reset validation on form
            form.removeClass("form-error"); // remove error class from form
    });

});

演示：http://jsfiddle.net/F2Re4/11/

【讨论】：

【解决方案2】：

使用.valid() 测试表单。查看valid()的点击功能

validate = function(){
    $("#myForm").valid();
};

resetForm = function(){
    var form = $("#myForm").validate();
    form.resetForm();
};

演示：http://jsfiddle.net/tive/U2XKx/

另外使用reset() 上的w3schools 来清除文本值。

【讨论】：