低调 "ignore" 设置无效

Unobstrusive "ignore" setting not working

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

场景:我有一个 table 通过在 MVC 中迭代模型生成,我通过在服务器端插入一个空白模型自动填充底部的空白行(这是要求的一部分,不可协商)。如果用户没有触摸它,我不想验证这个空白行,但如果他们触摸了,我就验证它。

为了解决这个问题,我正常生成 table。使用 jquery,我用 class 的 "blank" 自动标记任何空白行。通过查看源代码,我可以看到这种情况仅发生在 table 中的空白行。

现在,如果在客户端的 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';
}

现在上面的代码将验证动态添加到 table 的任何新行,但也会验证在相关元素上仍然具有 class 或 "blank" 的空白行。所以我要么不验证空白行,要么不验证新行,或者我可以验证所有行,包括那些带有 "blank".

标记的元素的行

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

我最终确实成功了。

在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);
});

您可以通过在 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";