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 输入字段中添加了一个类 (input-validation-error)。您可以在项目中指定覆盖此 css 类。