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 Validation框架在 Username 输入字段中添加了一个类（输入验证错误）。您可以在项目中指定覆盖此css类。