1

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

<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 标签，其中最里面的标签有一个 class=""

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

生成的 HTML 如下所示：

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

请注意，只生成了一个 span 标签，而不是嵌套标签。

这种行为使处理我的 CSS 变得很痛苦，因为我不能只设置 .field-validation-error 类的样式，因为我生成的 HTML 上有 2 个不同的最终结果。

总结：客户端验证仅生成 1 个跨度标记，服务器端验证生成 2 个跨度标记。

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

4

2 回答 2

2

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

你没有做错任何事。这就是jquery.validate.unobtrusive.js脚本的工作方式。因此，您可以将其称为缺失的功能、差异、PITA 等等，但这就是他们开箱即用的方式。

据说jquery validate 插件是可扩展的，我们可以随意调整它：

$.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-12T19:56:25.853 回答
0

如果您希望在服务器验证失败后（出于样式原因）始终对验证消息使用嵌套跨度，您可以执行以下操作：

$(document).ready(function(){
    $('.field-validation-error').each(function(){
        $(this).html($('<span>').text($(this).text()));
    });
});
于 2013-12-03T21:29:11.540 回答