.NET TIPS

［ASP.NET］CustomValidatorコントロールでクライアント検証を有効にするには？

山田 祥寛
2005/03/25

　「TIPS：［ASP.NET］CustomValidatorコントロールでマスタ重複チェックを実装するには？」でも紹介したように、CustomValidatorコントロールを利用することで標準的な検証コントロールでは対応していない独自の検証ルールをアプリケーションに追加できる。

　前掲のTIPSでは、このCustomValidatorコントロールを利用することで、サーバサイドで実行される検証ルールを定義してみた。しかし、クライアント／サーバ間の無用なトラフィックを少しでも軽減するためには、サーバサイド検証だけではなく、クライアントサイドでの検証も有効にしておくのが好ましい。これによって、クライアントサイドでの検証を擦り抜けたデータだけがサーバサイドで検出されることになるので、不要な通信の行き来を最低限に抑えられるというわけだ。

　本稿では、CustomValidatorコントロールでクライアントサイド検証を有効にした例として、フォーム要素内の文字列長チェックの実装例を示す。なお、サーバサイド検証の実装方法については、本稿では割愛するので、興味のある方は前掲のTIPSを併せて参照していただきたい。

　それではまず、具体的なコードを眺めてみることにしよう。前述したように、このプログラムではサーバサイドだけではなく、クライアントサイド（JavaScriptを使用）でも同じロジックにより検証を行っている。

<%@ Page ContentType="text/html" Language="C#" %>
<script runat="Server">
void cusTitle_Validate(Object sender, ServerValidateEventArgs e){
  if (e.Value.Length <= 30) {
    e.IsValid = true;
  } else {
    e.IsValid = false;
  }
}
</script>
<html>
<head>
<script language="JavaScript">
<!--
function cusTitle_Validate(sender, e){
  if (e.Value.length <= 30) {
    e.IsValid = true;
  }else{
    e.IsValid = false;
  }
}
//-->
</script>
<title>クライアント検証を有効にする（CustomValidatorコントロール）</title>
</head>
<body>
<form runat="Server">
タイトル：
<asp:TextBox id="txtTitle" runat="Server" Size="35" />
<asp:CustomValidator id="cusTitle" runat="Server"
  ControlToValidate="txtTitle"
  ClientValidationFunction="cusTitle_Validate"
  OnServerValidate="cusTitle_Validate" Display="Dynamic"
  ErrorMessage="タイトルは30文字以内でなければなりません。" />
<br />
<asp:Button id="btnSend" runat="Server" Text="送信" />
</form>
</body>
</html>
CustomValidatorコントロールで文字列チェックを実現するサンプル・プログラム（C#版：customValidate_cs.aspx）
　
<%@ Page ContentType="text/html" Language="VB" %>
<script runat="Server">
Sub cusTitle_Validate(sender As Object, e As ServerValidateEventArgs)
  If e.Value.Length <= 30 Then
    e.IsValid = True
  Else
    e.IsValid = False
  End If
End Sub
</script>
<html>
<head>
<script language="JavaScript">
<!--
function cusTitle_Validate(sender, e){
  if (e.Value.length <= 30){
    e.IsValid = true;
  } else {
    e.IsValid = false;
  }
}
//-->
</script>
<title>クライアント検証を有効にする（CustomValidatorコントロール）</title>
</head>
<body>
<form runat="Server">
タイトル：
<asp:TextBox id="txtTitle" runat="Server" Size="35" />
<asp:CustomValidator id="cusTitle" runat="Server"
  ControlToValidate="txtTitle" ClientValidationFunction="cusTitle_Validate"
  OnServerValidate="cusTitle_Validate" Display="Dynamic"
  ErrorMessage="タイトルは30文字以内でなければなりません。" />
<br />
<asp:Button id="bttnSend" runat="Server" Text="送信" />
</form>
</body>
</html>
CustomValidatorコントロールで文字列チェックを実現するサンプル・プログラム（VB.NET版：customValidate_vb.aspx）

　CustomValidatorコントロールでクライアントサイド検証を有効にする場合のポイントは、以下の2点だ。

（1）ClientValidationFunction属性を指定する

　CustomValidatorコントロールでは、サーバ側の検証メソッド（本稿の例では、cusTitle_Validateメソッド）をOnServerValidate属性で指定できるのと同様に、クライアント側の検証メソッドをClientValidationFunction属性で定義することができる。ここでは、サーバ側の検証メソッドとクライアント側の検証メソッドを同名に設定しているが、もちろん、この名前は異なっていても構わない。

　上記プログラムのように指定した場合には、クライアントサイド・スクリプトとして、以下のようなシグネチャを持つ検証メソッドを用意する必要がある。

言語 シグニチャ
JavaScript function cusTitle_Validate(source, arguments)
VBScript Sub cusTitle_Validate(source, arguments)
クライアント側における検証メソッドのシグニチャ

　クライアントサイド・スクリプトとしては、（当然）JavaScript、VBScriptなどのスクリプト言語を採用することができるが、クライアント環境を選ばないという観点で見れば、JavaScriptを採用しておくのが無難だろう。

　また、ClientValidatorFunction属性を指定した場合にも、EnableClientScript属性がFalseに設定されている場合には（デフォルトはTrue）、クライアントサイド検証は無効になってしまうので注意すること。

（2）検証結果はIsValidプロパティにセットする

　検証対象となる入力コントロールの値には、検証メソッドの第2パラメータとして渡されるオブジェクトのValueプロパティを介してアクセスすることが可能だ。ここでは、取得した値の文字列長を取得し、30文字以内であるかどうかを確認している。

　検証結果は、同じ第2パラメータのオブジェクトのIsValidプロパティにtrue／falseをセットすればよい。IsValidプロパティがtrueである場合にCustomValidatorコントロールは検証処理に成功したものと見なす。

　以上を理解したら、さっそく上記のサンプル・コードを実行してみよう。テキストボックスに30文字以上の文字列を入力した場合に、以下のようなエラー・メッセージが表示されば成功だ。

サンプル・プログラム（customValidate_cs.aspx／customValidate_vb.aspx）の実行結果

　なお、クライアント検証を有効にした場合にも、サーバサイド検証を無効にすることはできないので注意すること。そうした意味で、クライアント検証はあくまでトラフィックを軽減するための予備的な役割と考えるべきだ。ブラウザがクライアントサイド・スクリプトに対応していない、ユーザーがクライアントサイド・スクリプトを無効にしている場合に備えて、サーバサイド検証は最終的なチェックの場として必ず実装しなければならない。End of Article

カテゴリ：Webフォーム　処理対象：検証
使用キーワード：CustomValidatorコントロール
関連TIPS：［ASP.NET］CustomValidatorコントロールでマスタ重複チェックを実装するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］CustomValidatorコントロールでマスタ重複チェックを実装するには？
［ASP.NET］複数のボタンを持つフォームで検証コントロールを利用するには？
［ASP.NET］検証コントロールのパラメータを動的に設定するには？
［ASP.NET］検証コントロールで条件付きの検証処理を行うには？
［ASP.NET］検証コントロールのエラー・メッセージを一元管理するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT