前回の続きとも言える内容です。
ASP.NET MVC では 2 でクライアントサイド検証が、3 で Unobtrusive (控えめな) JavaScript による検証に対応しましたが、WebMatrix 2 というか Web Pages 2 で控えめな JavaScript によるクライアントサイド検証に対応しました。
使い方はこれまた簡単。前回のコードで ValidationHelper を使って検証の設定を行いましたので、数行のコードを追加するだけで簡単に対応出来ます！
さっそくコードを見てもらいましょう。
@{
Validation.RequireFields("name");
Validation.Add("level", Validator.Integer(), Validator.Range(0, 100));
if (IsPost)
{
Validation.Validate();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post">
<label for="name">名前</label>
<input type="text" name="name" @Validation.GetHtml("name") />
@Html.ValidationMessage("name")
<br />
<label for="level">レベル</label>
<input type="text" name="level" @Validation.GetHtml("level") />
@Html.ValidationMessage("level")
<br />
<input type="submit" value="送信" />
</form>
</body>
</html>
変更点は head タグの中にある
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script> <script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
この 3 行と、input タグの中にある
@Validation.GetHtml("name")
の呼び出しだけです。
head タグに書いているのは単なる jQuery やその他必要なファイルの読み込みです。そして、input タグに書いている GetHtml メソッドの呼び出しは、クライアントサイド検証に必要な情報を Custom Data Attributes として出力するためのものになっています。
実際に実行させてソースを確認すると、ちゃんと Custom Data Attributes で検証の設定が出力されていますね。
<input type="text" name="name" data-val-required="This field is required." data-val="true" /> <input type="text" name="level" data-val-range="Value must be an integer between 0 and 100." data-val-range-min="0" data-val-range-max="100" data-val="true" />
それでは実行して確認したいと思います。前回と同じく真実の値を入力して確認してみます。
今回もエラーが出ていることを確認してもらいたいのですが、それ以上に戻る・進むボタンの状態を確認してください。クライアントサイドでの処理なので、ページ遷移が発生していないので戻るボタンが有効になっていません。
そして当然ながら名前を空にしたり、レベルに数字以外を入力するとエラーになります。
ちなみに、今回はクライアントサイド検証の設定出力のために Validation.GetHtml を使いましたが、Html.TextBox などを使うと自動で出力されます。
<label for="name">名前</label> @Html.TextBox("name") @Html.ValidationMessage("name") <br /> <label for="level">レベル</label> @Html.TextBox("level") @Html.ValidationMessage("level")
入力値の復元とかされないのであまりメリットはないですが、割と面倒なのでこっちを使ってもいいと思います。