jQuery 不显眼的验证不会在动态内容加载时触发答案

【问题标题】：jQuery unobtrusive validation not firing on dynamic content loadjQuery 不显眼的验证不会在动态内容加载时触发
【发布时间】：2015-04-05 14:36:59
【问题描述】：

我正在尝试解析动态插入的表单以添加 jQuery 不显眼的验证。

我有以下在用户搜索时执行的 AJAX 函数：

function search(el)
{
    var $this = $(el);
    var $form = $this.closest("form");
    var url = $form.attr("action");
    $results = $("#pnlSearchResults");

    $.ajax({
        type: "POST",
        url: url,
        data: $form.serialize()
    })
    .done(function(data){
        $results.html('');
        $results.html(data);

        var $editForm = $results.find("form.edit-form");
        $editForm.removeData("validator");
        $editForm.removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse($editForm);
    });
}

这会将返回实体的可编辑表单插入到页面上的<div> 中，如下所示。我有两个必填字段，但是当我从这些字段中删除值时，“必填”验证不会触发。它似乎只在以下情况下发生：

我删除了这些值。
将光标从字段中移开。
输入一个新值。
移开光标。
然后删除新值。

如何解决这个问题，以便在我第一次删除值时进行验证？

【问题讨论】：

标签： javascript jquery ajax validation unobtrusive-validation

【解决方案1】：

我找到了this question，这让我在this page 上找到了答案。

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    //use the normal unobstrusive.parse method
    $.validator.unobtrusive.parse(selector);

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

    //get the collections of unobstrusive 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);
          }
        });
      }
    });
  }
})($);

用法：

var html = "<input data-val='true' "+
           "data-val-required='This field is required' " +
           "name='inputFieldName' id='inputFieldId' type='text'/>";
$("form").append(html);

$.validator.unobtrusive.parseDynamicContent('form input:last');

【讨论】：