jquery.validate.unobtrusive不使用动态元素注入工作

StackOverflow https://stackoverflow.com/questions/4406291

题

我与ASP.Net MVC3工作，使用客户端验证更简单的方法是使jquery.validate.unobtrusive。一切正常，对于东西，是从服务器的权利。

但是，当我尝试注入一些新的“输入”与JavaScript的，我知道，我需要调用$.validator.unobtrusive.parse()重新绑定验证。但尽管如此，所有这些动态注入字段不能正常工作。

更糟的是，我试图手动绑定使用jquery.validate和它不工作要么。任何想法？

有帮助吗？

解决方案

我创建为解决这个问题，我的情况的jquery.validate.unobtrusive库的扩展 - 它可能会感兴趣

http://xhalent.wordpress.com/2011/ 1月24日/施加-不显眼的验证到动态内容/

其他提示

我试过Xhalent的方法，但遗憾的是它并没有为我工作。罗宾的方法做了工作，没有工作。它的工作非常适合动态添加的元素，但如果你试图使用jQuery删除所有从DOM验证属性和跨度，验证库仍然会尝试验证他们。

然而，如果删除除了“validationData”形式的“unobtrusiveValidation”的数据，它像一个魅力用于动态地添加和删除元素您想要验证或不进行验证。

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

事实上，我很喜欢@viggity和@Robins溶液的简单性，所以把它变成一个小巧的插件：

(function ($) {

    $.fn.updateValidation = function () {
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

        $.validator.unobtrusive.parse(form);

        return $this;
    };
})(jQuery);

用法示例：

$("#DischargeOutcomeNumberOfVisits")
    .attr("data-val-range-min", this.checked ? "1" : "2")
    .updateValidation();

我有同样的问题。我发现这是不可能的调用$ .validator.unobtrusive.parse（）相同的形式两次。 当从服务器最初装载形式形式以不显眼的库自动解析。当您动态添加输入元素的形式和再次调用$ .validator.unobtrusive.parse（），它不会工作。这同样适用于parseElement（）。

在不显眼的LIB调用的JQuery验证插件设置的所有规则和消息验证方法。问题是，再次调用时，插件不更新新的一组规则的给定

我发现一个粗溶液：在请unobstrusive LIB parse方法之前，我扔掉形式验证器：

$('yourForm').removeData("validator");

现在，当验证方法由不显眼LIB调用，所有规则和消息重新创建包括动态添加输入。

希望这有助于

我使用的 MVC 4和JQuery 1.8，需要如下所示的一段代码，以使jQuery来通过Ajax，或jQuery验证动态内容注入到DOM。

我已经作出，其接受新添加的元素的jQuery对象模块化功能。 如果你已经克隆上一个按钮，点击使用jQuery ID tblContacts一个新表，然后在下面包含在你的js文件的功能

function fnValidateDynamicContent(element) {
    var currForm = element.closest("form");
    currForm.removeData("validator");
    currForm.removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(currForm);
    currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}

和调用它是这样的：

fnValidateDynamicContent("#tblContacts")

这Xhalent的溶液上方标记为答案以，我上它扩大了一下。

$.validator.unobtrusive.parseDynamicContent = function (selector) {
    var $selector = $(selector),
        $jqValUnob = $.validator.unobtrusive,
        selectorsDataValAttr = $selector.attr('data-val'),
        $validationInputs = $selector.find(':input[data-val=true]');

    if ((selectorsDataValAttr !== 'true') && 
        ($validationInputs.length === 0)) { 
        return; 
    }

    if (selectorsDataValAttr === 'true') {
        $jqValUnob.parseElement(selector, true);
    }

    $validationInputs.each(function () {
        $jqValUnob.parseElement(this, true);
    });

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

    $jqValUnob.syncValdators($form);
};

/* synchronizes the unobtrusive validation with jquery validator */
$.validator.unobtrusive.syncValdators = function ($form) {
    if ($.hasData($form[0])) {
        var unobtrusiveValidation = $form.data('unobtrusiveValidation'),
            validator = $form.validate();

        // add validation rules from unobtrusive to jquery
        $.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);
                    }
                });
            }
        });
        // remove all validation rules from jquery that arn't in unobtrusive
        $.each(validator.settings.rules, function (elname, elrules) {
            if (unobtrusiveValidation.options.rules[elname] === undefined) {
                delete validator.settings.rules[elname];
            } else {
                $.each(elrules, function (rulename, data) {
                    if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) {
                        delete validator.settings.rules[elname][rulename];
                    }
                });
            }
        });
    }        
};

$.validator.unobtrusive.unparseContent = function (selector) {
    var $selector = $(selector);

    // if its  a text node, then exit
    if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) {
        return;
    }

    var $form = $selector.first().closest('form'), 
        unobtrusiveValidation = $form.data('unobtrusiveValidation');

    $selector.find(":input[data-val=true]").each(function () {
        removeValidation($(this), unobtrusiveValidation);
    });
    if ($selector.attr('data-val') === 'true') {
        removeValidation($selector, unobtrusiveValidation);
    }
    $.validator.unobtrusive.syncValdators($form);
};

function removeValidation($element, unobtrusiveValidation) {
    var elname = $element.attr('name');
    if (elname !== undefined) {
        $element.rules('remove');
        if (unobtrusiveValidation) {
            if (unobtrusiveValidation.options.rules[elname]) {
                delete unobtrusiveValidation.options.rules[elname];
            }
            if (unobtrusiveValidation.options.messages[elname]) {
                delete unobtrusiveValidation.options.messages[elname];
            }
        }
    }
}

所以基本上它仍然有效同上Xhalent的解决方案，但我加入到移除元素，你从DOM移除规则的能力。所以，当你从DOM中删除元素，你想也删除了这些验证规则，然后调用：

$.validator.unobtrusive.unparseContent('input.something');

为什么不使用规则从jQuery验证文档起作用直接。像这样：

$('#newField0').rules('add', {
    required: true,
    minlength: 2
});
//use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors
$('@Html.ValidationMessage("newField0")').insertAfter('#newField0');

我发现@我的代码Xhalent的代码脚本，并打算，因为我没有使用它，这导致我这太问题，删除它。

此代码非常干净和简单的：

jQuery.fn.unobtrusiveValidationForceBind = function () {
    //If you try to parse a form that is already parsed it won't update
    var $form = this
       .removeData("validator") /* added by the raw jquery.validate plugin */
            .removeData("unobtrusiveValidation");  /* added by the jquery     unobtrusive plugin */

    $form.bindUnobtrusiveValidation();
}

然后，为了调用此jQuery的扩展名，只使用一个选择器抓住你形成：

$('#formStart').unobtrusiveValidationForceBind();

中提琴！

我试过viggity的回答，起初一切似乎工作。但一段时间后，我注意到，验证变得极其缓慢的更动态的项目我补充道。原因是他的解决方案不会解除绑定的事件处理程序，但每次添加新的。所以，如果你加5项验证执行6次，而不是只有一次。为了解决这个问题，你必须额外解除绑定事件到removeData电话。

$("form").removeData("validator")
         .removeData("unobtrusiveValidation")
         .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate");
$.validator.unobtrusive.parse("form");

在动态内容的情况下则需要更新不唐突的验证如下，并检查是否是Form而提交有效的。

function UpdateUnobtrusiveValidations(idForm) {
    $(idForm).removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(idForm));
};


$('#idDivPage').on('click', '#idSave', function (e) {
    e.preventDefault();
    if (!$('#idForm').valid()) {
        // Form is invalid … so return
        return false;
    }
    else {
        // post data to server using ajax call
        // update Unobtrusive Validations again
        UpdateUnobtrusiveValidations('#idForm');
    }
});

我一直在摆弄周围的这一段时间，报废解决方案，并稍后重新尝试（当我有一些空闲时间，信不信由你）。

我不知道，如果这行为将jQuery中的较新版本（我们使用的是1.7.2）已经改变，因为这个线程创建或最后一次评论，但我发现，.parseElement(inputElement)正常工作，当我尝试添加动态创建元件到已加载的验证器的一种形式。 这已经由@jamesfm（2月15日'11）在上述评论的一个建议，但我忽略了它的第几次我在做这个。所以我将其作为一个单独的答案，使之更加明显，因为我觉得这是一个很好的解决方案，并不需要那么多的开销。它可能不是相关的在后续的答案提出的所有问题，但我认为这将是原来的问题的解决方案。以下是我得到了我的工作：

//row & textarea created dynamically by an async ajax call further up in the code
var row = ...; //row reference from somewhere
var textarea = row.find("textarea");
textarea.val("[someValue]");

//add max length rule to the text area
textarea.rules('add', {
    maxlength: 2000
});
//parse the element to enable the validation on the dynamically added element
$.validator.unobtrusive.parseElement(textarea);

首先，我觉得应该联系.validator，无法验证，那么你需要在表格

的id传递 
$.validator.unobtrusive.parse("#id");
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top