在 jQuery 验证和回传之间不一致的错误消息 DOM

Question

来自 jQuery 验证和回发的错误消息 html 结构不同，导致我的验证错误显示不同。我需要 span.field-validation-error 中的嵌套 span 标记，因为我使用 CSS 在消息之前添加 (x) 图标，就像您在描述错误消息中看到的那样。

这是来自 jQuery 验证的错误消息。

<span class="field-validation-error" data-valmsg-for="Code" data-valmsg-replace="true">
    <span id="Code-error" class="">The Description field is required.</span>
</span>

请注意，在横幅 url 验证消息中，span.field-validation-error.

中没有 span 标记

<span class="field-validation-error" data-valmsg-for="BannerUrl" data-valmsg-replace="true">
   The Banner Image field is required.
</span>

这是我的视图 cshtml 文件标记。

<div class="form-group">
    @Html.LabelFor(x => x.Description):
    @Html.TextAreaFor(x => x.Description, new { rows = 5, cols = 5, @class = "form-control", placeholder = "Enter your team description" })
    @Html.ValidationMessageFor(x => x.Description)
</div>

<div class="form-group">
    @Html.LabelFor(x => x.BannerUrl):
    <input id="BannerUrl" name="BannerUrl" type="file" class="file-styled">
    @Html.ValidationMessageFor(x => x.BannerUrl)
</div>

为什么 jquery 验证的错误消息 html 与回发后生成的错误消息 html 不同？

编辑：

下面是 CSS 在错误消息前添加 (X) 图标。我真正想让它做的是让图标显示在来自回发（无嵌套跨度）的错误消息以及来自 jquery 验证（嵌套跨度）的错误消息前面。

.field-validation-error > span:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    min-width: 1em;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\ed63";
    margin-right: 5px;
}

Answer 1

jquery.validate.js 插件和 MVC 框架由不同的团队开发（jquery.validate 与 Microsoft 无关）。 MVC 框架仅使用 jquery.validate.js 进行客户端验证（并使用 jquery.validate.unobtrusive.js 将规则添加到 jquery.validate.js）。

您可以创建自己的 HtmlHelper 扩展来生成内部 <span> 元素服务器端。例如，复制 ValidationExtensions.cs source code 并修改 private static MvcHtmlString ValidationMessageHelper(...) 方法，以便使用 builder.InnerHtml = xx; 而不是 builder.SetInnerText(validationMessage);，其中 xx 是构建的 TagBuilder包含错误消息的 <span>。

但是，在首次加载页面时，仅使用一些 javascript 将内部文本包裹在 <span> 元素中会更容易

// Get all the elements generated by ValidationMessageFor() that have an error
var errors = $('.field-validation-error');
$.each(errors, function (index, item) {
    // Wrap the text in a span element
    $(this).wrapInner('<span></span>');
})

请注意，jquery.validate 插件还会根据属性名称向跨度添加一个 id 属性。根据您的 css，您似乎不需要它，但是，如果您确实想要包含它，那么您可以使用

$.each(errors, function (index, item) {
    var id = $(this).data('valmsg-for').replace(/[\.\[\]]/g, "_") + '-error';
    var span = $('<span></span>').attr('id', id);
    $(this).wrapInner(span);
})

另一种选择是将每个 ValidationMessageFor() 包装在一个元素中，例如

<span class="error">
    @Html.ValidationMessageFor(...)
</span>

并修改 css 选择器

.error > .field-validation-error:before {
    font-family: 'icomoon';
    ....
}

在 jQuery 验证和回传之间不一致的错误消息 DOM

Inconsistent error message DOM betweeen jQuery validation and Postback

c#

jquery-validate

razor

unobtrusive-validation

asp.net-mvc-5