MVC 3驗證：希望把我的紅色標籤對應的控件驗證失敗

Question

我使用MVC 3的驗證。我的產品經理希望每個出錯控件的標籤都變成紅色。

所以'學生名字'標籤應該變成紅色。 '電子郵件地址'標籤應該變成紅色。

我試圖包裝每個錯誤味精在一個div和檢查每個格

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

的長度在一個js文件：

$(document).ready(function() { 

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

    } 

但我沒有成功。驗證檢查在沒有完全刷新的情況下完成，因此，當驗證命中時，我的$（document）.ready未被觸發。

Answer 1

客戶端驗證禁用：

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()); 
     } 

編輯

客戶端驗證啓用

我真的不是在JS王，但這似乎工作（以及在至少簡單的情況）

$('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

下面是一個JQuery函數，當點擊提交按鈕時，通過添加（或刪除）一個錯誤類來爲包含的div標籤着色。它可以很容易地更改爲將類添加到標籤。

$('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'); 
      } 
     }); 
    } 
});