在客户端验证在MVC3中为true时呈现的差异

我正在创建一个全新的MVC3网站。在web.config中启用客户端验证在客户端验证在MVC3中为true时呈现的差异

<appSettings> 
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

方案1：一个失败（客户端）后生成HTML输出验证：

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error"> 
    <span htmlfor="UserName" generated="true" class="">Please enter an email address</span> 
</span>

注意嵌套的span标签，其中最里面的标签有a class =“”

场景＃2：自定义服务器端验证。使用相同的web.config配置，我在服务器上添加了一个验证以检查自定义业务规则。验证失败，我将该错误添加到ModelState中。

的HTML生成这个样子的：这是产生只有一个span标签

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">Please enter a valid email address</span>

注意，不是一个嵌套的标签。

这种行为让我很难处理我的CSS，因为我不能只是设置.field-validation-error类的样式，因为在我生成的HTML上有两个不同的最终结果。

总结：客户端验证只生成1个span标签，服务器端验证生成2个span标签。

问题：这是框架的缩进行为还是我做错了什么？

来源

2011-02-12 nandos

“IN SUMMARY”部分实际上是反转的，客户端验证会生成2个span标签。 – pauloya 2012-09-28 16:00:40

这是框架的缩进行为还是我做错了什么？

你没有做错任何事。这就是jquery.validate.unobtrusive.js脚本的工作原理。所以你可以称这是一个缺失的功能，差异，PITA，无论如何，但他们是这样做的。

这是说的jquery validate plugin是可扩展的，因为我们喜欢，我们可以调整它：

$.validator.setDefaults({ 
    // customize the way errors are shown 
    showErrors: function (errorMap, errorList) { 
     if (errorList.length < 1) { 
      // because we have customized the way errors are shown 
      // we need to clean them up if there aren't any 
      $('.field-validation-error', this.currentForm).hide().attr('class', 'field-validation-valid'); 
      $('.input-validation-error', this.currentForm).removeClass('input-validation-error'); 
      return; 
     } 
     $.each(errorList, function (index, error) { 
      // simply toggle the necessary classes to the corresponding span 
      // to make client validation generate the same markup as server 
      // side validation 
      var element = $(error.element); 
      element.attr('class', 'input-validation-error'); 
      element.next('span').show().text(error.message).attr('class', 'field-validation-error'); 
     }) 
    } 
});

来源

2011-02-12 19:56:25

感谢Darin，那就是我一直在寻找的！ – nandos 2011-02-13 07:17:55

如果你始终要为您验证消息嵌套跨度后的服务器验证失败（为造型的原因），你可以执行以下操作：

$(document).ready(function(){ 
    $('.field-validation-error').each(function(){ 
     $(this).html($('<span>').text($(this).text())); 
    }); 
});

来源

2013-12-03 21:29:11

在客户端验证在MVC3中为true时呈现的差异

回答

相关问题