目立たない検証をサポートする Fluent Validation を使用して、ASP.NET MVC3 Web サイトを構築しています。私たちの UX チームは、フィールドごととルールごとに、検証用に 2 つの個別のメッセージをサポートできるかどうかを尋ねてきました。1 つはフィールドの横に表示され、もう 1 つは概要に表示されます。
例えば：
次の問題に対処してください:
- 名を入力して
ください - 生年月日を入力してください名: __________________ <名は必須です>
生年月日: __________________ <生年月日は必須です>
フィールド レベルとサマリー レベルの検証メッセージが異なることに注意してください。
私の最初のオプションは、組み込みの検証を拡張して 2 番目のメッセージを許可することでしたが、すべてが1 つの ErrorMessage のみをサポートするModelErrorに組み込まれているため、これは簡単には達成できないと思います。
したがって、私が考えることができる他の唯一のことは、2つのメッセージを1つの文字列に結合し、これらから2つのメッセージを解析するようにヘルパー/jqueryを変更することによって、それをハックすることでした(しかし、私は問題を抱えています.それもやっている）。
このソリューションは、クライアント側の目立たない検証 (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>