呈现的HTML之间的区别时，客户端验证是真实的MVC3 [英] Difference between html rendered when client validation is true in MVC3

问题描述

我要创建一个全新的MVC3站点。
在web.config中启用客户端验证

 ＆LT;＆的appSettings GT;
   ＆LT;添加键=ClientValidationEnabledVALUE =真/＆GT;
   ＆LT;添加键=UnobtrusiveJavaScriptEnabledVALUE =真/＆GT;
＆LT; /的appSettings＆GT;
 

情景1：失败的（客户端）后生成输出HTML验证：

 ＆LT;跨度数据valmsg替换=真正的数据valmsg换=用户名级=字段验证错误＆GT;
    ＆LT;跨度htmlfor =用户名产生=真正的类=＆gt;请输入电子邮件地址＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
 

请注意嵌套的span标签，其中最里面的标签有一类=

情景2：自定义服务器端验证。在相同的web.config配置，我添加的服务器验证检查自定义业务规则。验证失败，我错误添加到ModelState中。

该HTML生成这个样子的：

 ＆LT;跨度数据valmsg替换=真正的数据valmsg换=用户名级=字段验证错误＆gt;请输入一个有效的电子邮件地址＆LT ; / SPAN＆GT;
 

请注意，生成只是一个跨度的标签，而不是一个嵌套的标签。

此行​​为是使其成为一个痛苦的处理我的CSS，因为我不能只是样式的点域验证错误类有我的生成的HTML 2个不同的最终结果。

在摘要：客户端验证只产生1 span标记，服务器端验证生成2 span标签

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

？

解决方案

  

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

您没有做错什么。这是 jquery.validate.unobtrusive.js 脚本是如何工作的。所以，你可以调用这个缺少的功能，差异，PITA，无论但这是他们是如何做出来的箱子。

这是说的 jQuery的验证插件是可扩展的，我们可以调整它我们喜欢：

  $。validator.setDefaults（{
    //自定义显示错误的方式
    showErrors：功能（errorMap，errorList）{
        如果（errorList.length＆所述; 1）{
            //因为我们定制的方式错误显示
            //我们需要清除它们，如果没有任何
            $（，this.currentForm字段验证错误。'）.hide（）ATTR（类，现场验证，有效的'）。
            （'输入验证错误'，this.currentForm）$ .removeClass（'输入验证错误'）;
            返回;
        }
        $。每个（errorList，函数（指数，误差）{
            //简单地切换所需的类对应的跨度
            //做客户端验证生成相同的标记作为服务器
            //端验证
            VAR元= $（error.element）;
            element.attr（类，输入验证错误'）;
            。element.next（'跨'）显示（）文本（返回Error.message）.attr（类，现场验证错误'）;
        }）
    }
}）;
 

I'm creating a brand new MVC3 site. Client side validation enabled on the web.config

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

Scenario #1: Output HTML generated after a failed (client side) validation:

<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>

Note the nested span tag where the innermost tag has a class=""

Scenario #2: Custom Server-side validation. With the same web.config configuration, I added a validation on the server to check for a custom business rule. The validation fails, I add the error to the ModelState.

The HTML generated looks like this:

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

Note that just one span tag was generated, NOT a nested tag.

This behavior is making it a pain to deal with my CSS as I can't just style the .field-validation-error class as there are 2 different end results on my generated HTML.

IN SUMMARY: Client side validation generates just 1 span tag, server side validation generates 2 span tags.

QUESTION: Is this the indented behavior of the framework or am I doing something wrong?

解决方案

Is this the indented behavior of the framework or am I doing something wrong?

You are not doing anything wrong. It's just how the jquery.validate.unobtrusive.js script works. So you may call this a missing feature, discrepancy, PITA, whatever but that's how they did it out of the box.

This being said the jquery validate plugin is extensible and we can tweak it as we like:

$.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');
        })
    }
});

这篇关于呈现的HTML之间的区别时，客户端验证是真实的MVC3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！