Question

我想在表单中添加/删除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类。

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

我如何解决这个问题？

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

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

Answer 1

使用.valid()来测试表单。查看valid()

的点击功能

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

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

DEMO ：http://jsfiddle.net/tive/U2XKx/

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

Answer 2

查看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，并且表单中仍然存在“错误”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
    });

});

DEMO：http://jsfiddle.net/F2Re4/11/

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

2 个答案: