validación MVC 3: quieren convertir mi etiquetas de color rojo que se corresponden con los controles que falló la validación

Question

estoy usando MVC 3 de validación. Mi Product Manager quiere que la etiqueta de cada control que tiene un error se vuelva roja.

Así etiqueta 'Estudiante Nombre' debe ponerse en rojo. La etiqueta 'Dirección de correo electrónico' debe ponerse roja.

Traté de envolver cada msg de error en un div y comprobar la longitud de cada div

<div id="divValStudentFirstName">@Html.ValidationMessageFor(m => m.studentFirstName)</div> 

en un archivo JS:

$(document).ready(function() { 

    if ($("#divValStudentFirstName").length > 1) { 
       ("#divStudentFirstName").css("color", "red"); 

    } 

, pero no tengo éxito. La verificación de validación se realiza sin una actualización completa y, como resultado, mi $ (documento) .ready no se activa cuando llega la validación. validación del lado del

Answer 1

cliente deshabilitado:

public static IHtmlString ValidationLabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string labelText = null) { 
      var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData); 
      var name = ExpressionHelper.GetExpressionText(expression); 
      string resolvedLabelText = labelText ?? metadata.DisplayName ?? metadata.PropertyName ?? name.Split('.').Last(); 
      if (String.IsNullOrEmpty(resolvedLabelText)) { 
       return MvcHtmlString.Empty; 
      } 

      var tag = new TagBuilder("label"); 
      tag.Attributes.Add("for", TagBuilder.CreateSanitizedId(html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name))); 
      tag.GenerateId(name); 
      tag.SetInnerText(resolvedLabelText); 
      ModelState modelState; 
      string fullName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name); 
      if (html.ViewData.ModelState.TryGetValue(fullName, out modelState)) { 
       if (modelState.Errors.Count > 0) { 
        tag.Attributes.Add("style", "color:red"); 
       } 
      } 
      return new MvcHtmlString(tag.ToString()); 
     } 

EDITAR

validación del lado del cliente habilitado

Realmente no soy un rey en js, pero esto parece que funciona (bien en una caso simple al menos)

$('form').submit(function() { 
     var form = $(this); 
     $('label').removeClass('field-validation-error'); 
     if (!form.valid()) { 
      $('.input-validation-error') 
       .each(function() { 
        $("label[for='" + $(this).attr("id") + "']").addClass('field-validation-error'); 
       }); 
     } 
    }); 

Answer 2

A continuación se muestra una función de JQuery que coloreará la etiqueta div que contiene al agregar (o eliminar) una clase de error cuando se haga clic en el botón Enviar. Se puede cambiar fácilmente para agregar la clase a la etiqueta.

$('form').submit(function() { 

    if ($(this).valid()) { 
     $(this).find('div.form-group').each(function() { 
      if ($(this).find('span.field-validation-error').length == 0) { 
       $(this).removeClass('error-colored'); 
      } 
     }); 
    } 
    else { 
     $(this).find('div.form-group').each(function() { 
      if ($(this).find('span.field-validation-error').length > 0) { 
       $(this).addClass('error-colored'); 
      } 
     }); 
    } 
});