MVC 3格式驗證消息

Question

我正在使用每行有4個輸入字段的表單佈局，因此我需要找到一種顯示驗證消息的不同方式。我想我可以在窗體上方顯示任何消息，但是想添加邊框和背景顏色。

我使用不顯眼的JS進行驗證。

有沒有辦法檢測視圖中是否存在驗證錯誤？

例

@using (Ajax.BeginForm("ProcessContactInfo", ajaxOpts)) 
    { 
     @Html.ValidationSummary(true) 
      if (!ViewData.ModelState.IsValid)//does nothing because using unobtrusiveJS validation 
      { 
     <div id="ValidationResultsArea" style="padding:20px; border: 1px solid #000000; background-color: #ffffcc; display: none" > 
      @Html.ValidationMessageFor(model => model.Contact.FirstName)<br /> 
      @Html.ValidationMessageFor(model => model.Contact.LastName)<br /> 
      @Html.ValidationMessageFor(model => model.Contact.Email)<br /> 
      @Html.ValidationMessageFor(model => model.Contact.Message)<br /> 
     </div> 
     } 
     <p><span class="required">&#42; All fields are required.</span></p> 
} 

Answer 1

看起來像你正在尋找類似這樣的東西....

如果這是你在找什麼，那麼你可以很容易地如果你使用MVC3和jQuery驗證來實現它。 jQuery驗證使用自定義數據屬性，CSS和不顯眼的JavaScript來執行用戶輸入驗證，所以當驗證失敗的特定輸入字段，jQuery「注入」數據屬性和CSS類，那麼你可以利用這一點通過使用CSS來定義你想要的領域看起來像。這裏是屬於上面的截圖中的HTML ...

<div class="editor-label"> 
     <label for="UserName" style="display: none;">User name</label> 
    </div> 
    <div class="editor-field"> 
     <span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">The User name field is required.</span> 
     <input class="input-validation-error" data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" placeholder="Username" type="text" value=""> 
    </div> 

    <div class="editor-label"> 
     <label for="Password" style="display: none;">Password</label> 
    </div> 
    <div class="editor-field"> 
     <span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">The Password field is required.</span> 
     <input class="input-validation-error" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" placeholder="Password" type="password"> 
    </div> 

    <div class="editor-label"> 
     <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false"> Remember Me 
    </div> 

    <p> 
     <input type="submit" value="Log On"> 
    </p> 

你可以看到，jQuery驗證框架增加了一個類（輸入驗證錯誤）到用戶名輸入字段。你可以在你的項目中指定重寫這個CSS類。