ASP.NET MVC 2 验证错误样式

Question

我在 ASP.NET MVC 2 表单验证和设置样式方面遇到问题。

这是我的表单示例，存在验证错误：

该字段使用以下 html：

<div class="registration-field">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

问题是，为了在整个元素上显示突出显示，我需要将 CSS 类“registration-field-error”添加到第一个 div。

<div class="registration-field registration-field-error">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

注册字段错误的 CSS 是：

.registration-field-error
{
    background-image:url(../Content/Images/box-background-error.png);
    background-repeat:repeat-y; 
}

我可以执行一些复杂的逻辑来检查 ViewState 是否有错误，这对于服务器验证错误效果很好，但不适用于客户端验证：

<% if (ViewData.ModelState["FullName"] == null) { %>
     <div class="registration-field">
<% }  else { %>
     <div class="registration-field registration-field-error">
<% } %>

我的第一个想法是创建一个新的 Html 帮助器决定是否应使用 Registration-field-error 类：

<%= Html.FormFieldFor(x => x.FullName, ViewData.ModelState) %> 

然后编辑 MicrosoftMvc.Ajax.js 脚本以在检测到客户端验证错误时添加该类。

或者，有更好的方法来实现这一点吗？

Answer 1

首先将您的 div 元素包装在没有任何条件逻辑的情况下，但将您的验证消息包装在带有类名“error”的 span 中，如下所示：

<div class="registration-field">      
  <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>      
    <span class="error"><%= Html.ValidationMessageFor(x => x.FullName)%></span>
</div> 

然后使用下面给出的函数动态添加错误类：

$(function(){
 $("div span.error").each(function(){
  var className = $(this).parent().attr("class") + "-error";
  if($(this).html().length > 1)
   $(this).parent().addClass(className);
 });
});

这将更改代码的较少部分。