Стили ошибок проверки ASP.NET MVC 2

Question

У меня проблемы с проверкой формы ASP.NET MVC 2 и настройкой стиля.

Вот пример моей формы с ошибкой проверки:

В поле используется следующий html:

<div class="registration-field">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

Проблема в том, что для отображения выделения по всему элементу мне нужно добавить класс CSS «registration-field-error» в первый div.

<div class="registration-field registration-field-error">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

CSS для регистрации-поля-ошибки:

.registration-field-error
{
    background-image:url(../Content/Images/box-background-error.png);
    background-repeat:repeat-y; 
}

Я могу сделать некоторую сложную логику, чтобы проверить ViewState на наличие ошибок, которая отлично работает для ошибок проверки сервера, ноне для проверки на стороне клиента:

<% if (ViewData.ModelState["FullName"] == null) { %>
     <div class="registration-field">
<% }  else { %>
     <div class="registration-field registration-field-error">
<% } %>

Моей первой мыслью было создание нового помощника Html, чтобы решить, должен ли он использовать класс ошибки поля регистрации:

<%= Html.FormFieldFor(x => x.FullName, ViewData.ModelState) %> 

Изатем отредактируйте скрипт MicrosoftMvc.Ajax.js, чтобы добавить класс при обнаружении ошибок проверки на стороне клиента.

Или, есть ли лучший способ сделать это?

Answer 1

Сначала оберните элементы div без какой-либо условной логики, но оберните ваши сообщения проверки в span с именем класса «error», как показано ниже:

<div class="registration-field">      
  <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>      
    <span class="error"><%= Html.ValidationMessageFor(x => x.FullName)%></span>
</div> 

, а затем используйте функцию, приведенную ниже, для динамического добавления классов ошибок.:

$(function(){
 $("div span.error").each(function(){
  var className = $(this).parent().attr("class") + "-error";
  if($(this).html().length > 1)
   $(this).parent().addClass(className);
 });
});

Это изменило бы меньше частей вашего кода.