不显眼的“忽略”设置不起作用

Question

这有点奇怪。关于为不显眼的验证的settings 对象设置ignore 属性的SO 有很多问题。

场景：我有一个通过迭代 MVC 中的模型生成的表，我通过在服务器端插入一个空白模型在底部自动填充一个空白行（这是需求的一部分，不可协商）。如果用户没有触摸它，我不想验证这个空白行，但如果他们有的话。

为了解决这个问题，我照常生成表格。使用 jquery，我用“空白”类自动标记任何空白行。通过查看源代码，我只能看到表格中的空白行会发生这种情况。

现在，如果在我拥有的客户端上的 document.read() 调用中；

$.validator.unobtrusive.parse('form');
var form = $('form').get(0);
var settings = $.data(form, 'validator').settings;
settings.ignore = ':hidden,.blank';

这很好用。即使我添加新行，点击提交也不会触发对空白行的验证。但是，验证不会发生在除第一行之外的任何填充行上。

为了解决这个问题，我创建了一个函数reattachValidation()，每当我添加新行时都会调用它，以便为新行触发验证。代码修改为：

function reattachValidation() {
    var forms = $('form');
    forms.removeData('validator');
    forms.removeData('unobtrusiveValidation');

    $.validator.unobtrusive.parse('form');
    var form = $('form').get(0);
    var settings = $.data(form, 'validator').settings;
    settings.ignore = ':hidden,.blank';
}

现在，上面的代码将验证动态添加到表中的任何新行，但还将验证在相关元素上仍具有“空白”类的空白行。所以我不能验证空白行和新行，或者我可以验证所有行，包括带有“空白”标记的元素的行。

如何在使用用户数据验证新行的同时忽略空白行？

Answer 1

您可以通过在 SO 上其他地方记录的原始标准方式添加一行来使忽略工作。这涉及使用 jquery .off() 删除绑定到表单的提交事件。需要这样做的原因是验证器对象的先前实例必须提交事件，并且由于 javascript 闭包的工作方式，它们没有被更新。

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$("form").off("submit.validate"); //new line

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

$("form").validate().settings.ignore = ":hidden, .blank";

Answer 2

我最终确实做到了。

在javascript中；

$(function() {
    $.validator.unobtrusive.parse("form");
    var form = $("form").get(0);
    var settings = $.data(form, "validator").settings;
    settings.ignore = ":hidden,.blank";
});

// This function will attach any dynamic entity (e.g., a new row in a grid) to the
// MVC unobtrusive validator to be validated at the appropriate time.
// Usage:    $.validator.unobtrusive.parseDynamicContent(newTableRow);
(function ($) {
    $.validator.unobtrusive.parseDynamicContent = function (selector) {
        //use the normal unobstrusive.parse method
        $.validator.unobtrusive.parse(selector);

        //get the relevant form
        var form = $(selector).closest("form");

        //get the collections of unobtrusive validators, and jquery validators
        //and compare the two
        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];
                //edit:use quoted strings for the name selector
                $("[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];
                        //edit:use quoted strings for the name selector
                        $("[name='" + elname + "']").rules("add", args);
                    }
                });
            }
        });
    }
})($);

然后在添加新的动态元素时，这样做是这样的（动画是不必要的，但对parseDynamicContent()的调用是；

selectedTableRow.after(newTableRow);
newTableRow.fadeIn(500, function () {
    // reattach the MVC validation after adding a new row so that we get our client
    // side validation on the data annotations.
    // NOTE: we do this AFTER the fade in animation as by default the validator will
    //       not hook into any hidden elements - which our row is until the animation
    //       completes.
    $.validator.unobtrusive.parseDynamicContent(newTableRow);
});