0

我想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()验证表单时，它会自动将errorcss 类添加/删除到每个控件，例如输入。通过添加 invalidHandler这个额外将添加/删除error整个表单的 css 类。

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

我该如何解决这个问题？

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

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

4

2 回答 2

1

查看您的 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附加到“验证”按钮的功能。只需将按钮更改为 a 即可type="submit"自动验证。否则，您将需要另一个.on('click')处理程序和一个.valid()inside 来触发验证测试。

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

引用操作：

...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/

于 2013-11-11T18:44:59.900 回答
0

用于.valid()测试表格。见valid()的click函数

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

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

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

另外使用w3schoolsreset()上的内容来清除文本值。

于 2013-11-09T02:39:45.953 回答