JQuery 验证 - 在表单中添加/删除错误 css 类

JQuery Validate - Add/remove error css class in the form

本文关键字：删除 错误 css 添加 验证 表单 JQuery      更新时间：2023-09-26

我想在表单中添加/删除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 类添加/删除到每个控件（例如输入）。通过添加invalidHandler这将额外添加/删除整个表单的error css类。

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

如何解决此问题？

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

更新这里有一个愚蠢的例子：http://jsfiddle.net/F2Re4/和我手动删除了类（在这个例子中，我称这个类为："错误形式"）

查看 jsFiddle 的标记，

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

1） input元素没有结束标记。 根据您的doctype，它们可能需要也可能不需要"自关闭"，但从来没有任何</input>标签这样的东西。

2）内联JavaScript在使用jQuery时是丑陋和不必要的。 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永远不会被调用，并且"错误"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/

使用 .valid() 测试表单。请参阅有效（）的单击函数

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

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

此外，使用 w3schools 上看到的reset()来清除文本值。

相关文章：