jquery - 多次验证器调用使用不显眼的方式动态添加内容

Question

这是一个典型的问题，当您通过 javascript 将内容添加到表单时，尽管您调用了该内容，但该内容并未得到验证 $.validator.unobtrusive.parse("表单");

好的，这是一个很好的解决方案:在解析之前清理信息:

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");`

这非常好，而且看起来确实有效。但!每个验证器被调用的次数与您调用此 block 的次数一样多:

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

您可以通过创建自定义验证器并在内部或任何调试输出中设置断点来轻松检查这种情况:

jQuery.validator.addMethod("checksalary",
   function (value, element, param) {
   return (!isNaN(value) && parseInt(value) > 0) || $("#" + param).attr('checked');
});

jQuery.validator.unobtrusive.adapters.add
("checksalary", ["param"], function (options) {
  options.rules["checksalary"] = options.params.param;
  options.messages["checksalary"] = options.message;
});

如果你的验证者调用了几次而不是一次，那看起来真的很不专业。

在调用parse()之前是否还有其他信息需要清理？

假设您已调用 parse() 100 次。我认为这样的开销对于客户来说是清晰可见的。

更新好吧，我可以调试大量的脚本，并且发现，即使我们清理了表单的验证信息，我们仍然没有清理这个绑定(bind)，这是由 jquery.validate.js 中的第 53 行引起的

    this.submit(function (event) {
        if (validator.settings.debug)
        // prevent form submit to be able to see console output
            event.preventDefault();
...

因此，我为这种情况创建了临时的丑陋修复程序，目前有效，但我相信应该有更好的方法，例如更新验证对象，而不是创建新的验证对象:

    var validator = $.data(this[0], 'validator');
    var skipReAttach = false;
    if (validator) {
        //return validator;
        skipReAttach = true;
    }

    validator = new $.validator(options, this[0]);
    $.data(this[0], 'validator', validator);

    if (validator.settings.onsubmit) {

        // allow suppresing validation by adding a cancel class to the submit button
        this.find("input, button").filter(".cancel").click(function () {
            validator.cancelSubmit = true;
        });

        // when a submitHandler is used, capture the submitting button
        if (validator.settings.submitHandler) {
            this.find("input, button").filter(":submit").click(function () {
                validator.submitButton = this;
            });
        }

        // validate the form on submit
        if (skipReAttach)
            return validator;

        this.submit(function (event) {
            if (validator.settings.debug)
            // prevent form submit to be able to see console output
                event.preventDefault();

当然 - 仅限现在 $.validator.unobtrusive.parse(“表单”);应该被调用。

但是解决这个问题的好方法是什么？

Answer 1

我在this solution的大量帮助下找到了一个不太优雅的解决方案。 。到目前为止对我来说效果很好，尽管还没有经过彻底的测试。

而不是使用:

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form");

使用下面的代码:

function resetValidationAttributes(parentContainer) {
    $(parentContainer).find(':input[data-val = true]').each(function() {
        //
        $.validator.unobtrusive.parseElement(this, true);

        var form = $(this).first().closest('form');

        var unobtrusiveValidation = form.data('unobtrusiveValidation');
        var validator = form.validate();

        $.each (unobtrusiveValidation.options.rules, function (elname, elrules) {
            if (validator.settings.rules[ elname] == undefined) {
                var args = {};
                $.extend(args, elrules);
                args.messages = unobtrusiveValidation.options.messages[elname];
                $('[name="' + elname + '"]').rules("add" , args );
            } else {
                $.each(elrules, function(rulename, data) {
                    if(validator.settings.rules[elname][rulename] == undefined) {
                        var args = {};
                        args[rulename ] = data;
                        args.messages = unobtrusiveValidation.options.messages[elname][rulename];
                        $('[name="' + elname + '"]').rules("add", args);
                    }
                });
            }
        });
    });
}

它获取动态内容加载到的容器，然后搜索该容器中的任何输入。对于每个输入，它都会调用 parseElement 并在函数调用中指定 true(有关更多信息，请参阅不显眼的验证文件)。最后，它会检查表单上的验证器，并将该字段添加到规则中(如果不存在)。