ASP.NET MVC 3不显眼的jQuery验证不会显示自定义错误消息不止一次

Question

因此，我从this Microsoft provided Example拿了一些代码，它允许我使用jquery validate unobtrusive库来解析从我的服务器返回的验证错误消息并显示它们UI。他们有一个video demonstrating this。所以，这里是一块Javascript代码我使用：

$.validator.addMethod("failure", function() { return false; }); 
    $.validator.unobtrusive.adapters.addBool("failure"); 
    $.validator.unobtrusive.revalidate = function (form, validationResult) { 
     $.removeData(form[0], 'validator'); 
     var serverValidationErrors = []; 
     for (var property in validationResult) { 
      //var elementId = property.toLowerCase(); 
      var item = form.find('#' + property); 
      if (item.length < 1) { item = form.find('#' + property.replace('.', '_')); } 
      serverValidationErrors.push(item); 
      item.attr('data-val-failure', validationResult[property].join(', ')); 
      jQuery.validator.unobtrusive.parseElement(item[0]); 
     } 
     form.valid(); 
     $.removeData(form[0], 'validator'); 
     $.each(serverValidationErrors, function() { 
      this.removeAttr('data-val-failure'); 
      jQuery.validator.unobtrusive.parseElement(this[0]); 
     }); 
    }; 

所以再经过手柄误差函数的AJAX形式后我会做这样的事情：

$.validator.unobtrusive.revalidate(form, { 'PhysicalAddress.CityName': ['You must select a valid city'] }); 

凡PhysicalAddress 。城市名称是我的viewmodel属性和html输入字段的名称。因此，它知道将验证消息放在正确的html元素旁边。

这工作1次。然后，当他们打再次提交和我的代码再次调用unobtrusive.revalidate方法..它不工作。它只显示验证消息一次，然后验证消息消失。

有没有人有任何想法，为什么这可能会发生？..我通过revalidate方法的步骤，没有错误抛出，一切似乎它应该工作..但由于某种原因不显眼的库不重新，绑定验证错误消息。

感谢

Answer 1

也许这种行为依赖于jQuery验证插件的已知问题：动态地添加新的验证规则元素的作品只有一次！进一步的尝试会被拒绝，因为插件认为它们是定义已定义规则的重复尝试。

这就是为什么$.validator.unobtrusive.parse在您添加新创建的内容时（例如，您将新行添加到项目集合）不起作用的原因。有一个$.validator.unobtrusive.parse的修补程序，您可能会尝试将其应用于重新验证功能....但最好从头开始以不同的方式重写它。 revalidate函数使用验证插件只是为了在正确的地方放置所有验证错误，然后尝试重置验证插件的状态。然而，从表格中删除验证对象是不够的，取消做了所有的工作，因为没有包含在form.data('unobtrusiveValidation')，其中形式正在验证包含表单变量另一个对象......这数据不被重新验证功能复位。 ..并且无法重置，因为重置它们会导致取消所有客户端验证规则。

也许这个问题已经解决了验证插件的最新版本，那么尝试更新与的NuGet的最后一个版本。

如果这不能解决您的问题我可以传给你在一个完全不同的方式来实现类似的功能（它模仿服务器的操作在服务器端显示服务器端错误）。它将包含在即将发布的Mvc Controls工具包中。然而，如果你给我几天（我会很忙2天），我可以从它那里提取它的依赖关系，所以你可以使用它。如果您有兴趣，请告诉我。

下面我答应的代码。它期望的数组，其元素是：

{ 
    id:id of the element in error 
    errors:array of strings errors associated to the element 
} 

它接受用于每个元件，但为每个元素 ID只是显示二第一个几个错误是从因名不同。[]的其他特殊字符被替换为_

您可以在服务器与

htmlName.Replace('$', '_').Replace('.', '_').Replace('[', '_').Replace(']', '_'); 

或在客户端的JavaScript与变换名称为ID：

name.replace(/[\$\[\]\.]/g, '_'); 

function remoteErrors(jForm, errors) { 
    ////////// 
    function inner_ServerErrors(elements) { 
     var ToApply = function() { 
      for (var i = 0; i < elements.length; i++) { 
       var currElement = elements[i]; 
       var currDom = $('#' + currElement.id); 
       if (currDom.length == 0) continue; 
       var currForm = currDom.parents('form').first(); 
       if (currForm.length == 0) continue; 

       if (!currDom.hasClass('input-validation-error')) 
        currDom.addClass('input-validation-error'); 
       var currDisplay = $(currForm).find("[data-valmsg-for='" + currElement.name + "']"); 
       if (currDisplay.length > 0) { 
        currDisplay.removeClass("field-validation-valid").addClass("field-validation-error"); 
        replace = $.parseJSON(currDisplay.attr("data-valmsg-replace")) !== false; 
        if (replace) { 
         currDisplay.empty(); 
         $(currElement.errors[0]).appendTo(currDisplay); 
        } 
       } 
      } 
     }; 
     setTimeout(ToApply, 0); 
    } 
    ///////// 
    jForm.find('.input-validation-error').removeClass('input-validation-error'); 
    jForm.find('.field-validation-error').removeClass('field-validation-error').addClass('field-validation-valid'); 
    var container = jForm.find("[data-valmsg-summary=true]"); 
    list = container.find("ul"); 
    list.empty(); 
    if (errors.length > 0) { 
     $.each(errors, function (i, ival) { 
      $.each(ival.errors, function (j, jval) { 
       $("<li />").html(jval).appendTo(list); 
      }); 

     }); 
     container.addClass("validation-summary-errors").removeClass("validation-summary-valid"); 
     inner_ServerErrors(errors); 
     setTimeout(function() { jForm.find('span.input-validation-error[data-element-type]').removeClass('input-validation-error') }, 0); 
    } 
    else { 
     container.addClass("validation-summary-valid").removeClass("validation-summary-errors"); 
    } 
} 
function clearErrors(jForm) { 
    remoteErrors(jForm, []); 
}