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类。