通过不显眼的验证,为每个字段/规则支持两个不同的验证消息

时间:2012-07-13 21:16:37

标签: asp.net-mvc-3 validation unobtrusive-validation

我们正在使用Fluent验证构建ASP.NET MVC3网站,并支持不显眼的验证。我们的UX团队询问我们是否可以支持两个单独的消息进行验证,每个字段和每个规则:一个将显示在字段旁边,另一个将显示在摘要中。

例如:

  

请解决以下问题:
   - 请提供名字
   - 请提供出生日期

     

名字:__________________<名字是必需的>
  出生日期:__________________<出生日期是必需的>

请注意,字段级和摘要级验证消息不同。

我的第一个选择是扩展内置验证以允许第二条消息,但我不认为这很容易实现,因为所有内容都硬连接到ModelError,它只支持一个ErrorMessage。

所以我能想到的另一件事就是通过将两个消息组合成一个字符串来破解它(是的,这个解决方案闻起来),并修改helpers / jquery以解析这两个消息(但是我' m having problems也这样做。)

此解决方案需要使用客户端不显眼的验证(使用data-属性),当然还需要服务器端。

我很想知道另一种方法。

更新

这是我的观点

@using (Html.BeginForm())
{
    @Html.ValidationSummary()
    <p>
        @Html.EditorFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
    </p>
    <p>
        @Html.EditorFor(m => m.BirthDate)
        @Html.ValidationMessageFor(m => m.BirthDate)
    </p>    
    <input type="submit" />
}

以下是它呈现的内容:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</head>
<body>
    <form action="/" method="post">
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display: none"></li>
        </ul>
    </div>
    <p>
        <input class="text-box single-line" data-val="true" id="UserName" 
               name="UserName" type="text" value="" 
               data-val-required="The User name field is required." />
        <span class="field-validation-valid" 
              data-valmsg-for="UserName" data-valmsg-replace="true">
        </span>
    </p>
    <p>
        <input class="text-box single-line" data-val="true" id="BirthDate" 
               name="BirthDate" type="text" value="" 
               data-val-required="The Date of birth field is required." />
        <span class="field-validation-valid" data-valmsg-for="BirthDate" 
              data-valmsg-replace="true">
        </span>
    </p>
    <input type="submit" />
    </form>
</body>
</html>

0 个答案:

没有答案