WebMatrix 2 ベータでクライアントサイド検証を試す

前回の続きとも言える内容です。

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")