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>

请注意，在横幅网址验证消息中，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不同？

编辑：

下面是在错误消息之前添加（X）图标的CSS。我真正想要它做的是图标显示在来自回发（没有嵌套跨度）的错误消息前面，以及来自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扩展名来生成内部元素服务器端。例如，复制ValidationExtensions.cs source code并修改private static MvcHtmlString ValidationMessageHelper(...)方法，以便使用builder.SetInnerText(validationMessage);而不是builder.InnerHtml = xx; xx，其中TagBuilder是包含错误消息的。

然而，当首次加载页面时，使用一些javascript将内部文本包装在// 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(''); })元素中会更容易

jquery.validate

请注意，id插件还会根据属性名称向范围添加$.each(errors, function (index, item) { var id = $(this).data('valmsg-for').replace(/[\.\[\]]/g, "_") + '-error'; var span = $('').attr('id', id); $(this).wrapInner(span); })属性。您似乎不需要基于您的CSS，但是，如果您想要包含它，那么您可以使用

ValidationMessageFor()

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

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

并修改css选择器

<?php
// Create connection
$conn = mysqli_connect("localhost","nmhsmusi_admin" , "********", "nmhsmusi_musicdb");

// Check connection
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

if (isset($_POST['submit']))
{

    $titleTag = $_POST['title'];
    $composerTag = $_POST['composer'];
    $unicodeTag = $_POST['unicode'];
    $tempoTag = $_POST['tempo'];
    $yearTag = $_POST['year-used'];
    $languageTag = $_POST['language'];
    $keyTag = $_POST['key-signature'];
    $pianoTag = $_POST['piano'];
    $temposelTag = $_POST['temposel'];
    $partsTag = $_POST['parts'];

    $run = mysqli_query($conn,"INSERT INTO musicdb (title, composer, unicode, temptxt, yearused, languages, pianokeys, piano, temposel, parts)
        VALUES
        (
            '$titleTag', '$composerTag', '$unicodeTag', '$tempoTag', '$yearTag', '$languageTag', '$keyTag', '$pianoTag', '$temposelTag', '$partsTag'
        )");

    if ($run) {
        echo "New record created successfully";
    } else {
        echo "failed";
    }
    mysqli_close($conn);
}
?>

jQuery验证和Postback之间的错误消息DOM不一致

1 个答案: