前回の続きとも言える内容です。
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")
入力値の復元とかされないのであまりメリットはないですが、割と面倒なのでこっちを使ってもいいと思います。