不一致的錯誤消息DOM之間的jQuery驗證和Postback

我的錯誤消息HTML結構從jQuery驗證和回發是不同的導致我的驗證錯誤顯示不同。我需要span.field-validation-error中的嵌套span標籤，因爲我使用CSS在消息之前添加（x）圖標，就像您在Description錯誤消息中看到的那樣。不一致的錯誤消息DOM之間的jQuery驗證和Postback

這是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錯誤信息與postback後生成的錯誤信息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; 
}

來源

2017-02-05 Platypus Maximus

'jquery.validate'由完全獨立的開發，所述MVC框架，和'jquery的寫入。validate'需要定義一個'errorElement'作爲該消息的容器（默認情況下它的''，但'jquery.validate.unobtrusive'覆蓋了使用'' –

有沒有辦法來覆蓋錯誤消息從回發中返回的HTML？ –

當使用'ModelState'錯誤返回一個視圖時，'ValidationMessageFor（）'只會呈現''元素中的消息文本，除非您要編寫自己的擴展方法，否則不會。但是，爲什麼你想這樣做？ –

的jquery.validate.js插件和MVC框架是由不同的團隊開發（jquery.validate不與微軟相關的）。 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'; 
    .... 
}

來源

2017-02-06 01:34:58

不一致的錯誤消息DOM之間的jQuery驗證和Postback

回答

相關問題