Validatorをクライアントサイドで有効／無効にする

はじめに

ASP.NETでは、Validatorと呼ばれる何種類かのコントロールを使って、

• サーバサイド
• クライアントサイド

の両方で妥当性検証（入力チェック）を行うのが一般的だ。本エントリでは、クライアントサイドでの妥当性検証を行うかどうかを、クライアントサイド（JavaScript）で（ポストバックせずに）切り替える方法を記述する。

方法

JavaScriptでValidatorEnable(val, enable)関数を呼び出す。関数の詳細は以下のとおり。

処理内容

指定されたValidatorの有効／無効を切り替える。

val

ValidatorのHTML要素。Validatorが自動生成するJavaScriptコードにより、HTML要素のidと同名のグローバル変数が定義されている。document.getElementByIdしても良いが、そのグローバル変数を引き渡しても良い。

enable

有効にする場合true。無効にする場合false。

戻り値

なし

ValidatorEnable関数について

この関数は、ページ内にValidatorを1つでも配置していればValidatorによって自動的に読み込まれるJavaScriptファイルに定義されている。このJavaScriptファイルには、その他にもさまざまな定義が含まれている。それらのクライアントサイドAPIについて、より詳細は情報は、「ASP.NET Validation in Depth」を参照のこと。

サンプル

aspxファイルで以下のように記述しているとする。

<asp:TextBox ID="txt" runat="server" />
<asp:CheckBox ID="chk" runat="server" Text="妥当性検証する" />
<asp:RequiredFieldValidator ID="val" runat="server" ControlToValidate="txt" ... />

aspxファイル内のJavaScriptで、以下のように記述する*1。

YAHOO.util.Event.addListener("<%= chk.ClientID %>", "click", function() {
    // idと同名のグローバル変数が定義されている
    var val = <%= val.ClientID %>;
    if (!val) {
        alert("Validatorが見つからない");
        return;
    }
    if (this.checked) {
        // ValidatorEnable関数で有効化する場合、その時点で
        // ・妥当性検証
        // ・（Textプロパティの）表示更新
        // が行われる。
        // チェックボックスをチェックしただけなのにNG表示となるのは
        // 見た目が良くないので、一時的にDisplayをNoneにする。
        val.display = "None";
    }
    ValidatorEnable(val, this.checked);
    // Displayをサーバサイドでの設定値に戻す
    val.display = "<%= val.Display %>";
});

*1:YAHOO! UI Libraryを使うこととする