入力チェックの検証結果をまとめて表示する方法

最終更新日 2006 年 3 月 22 日

サンプルコードのダウンロード (aspnettips_InputCheck3.msi, 252 KB)

※このサンプルをお使いいただくためには、 Visual Studio 2005が必要です。

入力された値をチェックする方法については、入力された値をチェックする方法と、入力された値をより高度にチェックする方法で紹介しました。ここでは、検証の結果エラーだったときに表示するメッセージを各コントロールを配置した箇所に表示していました。
しかし、場合によっては、メッセージを項目毎に表示するのではなく、一箇所にまとめて表示したいことがあります。そのようなときには、ValidationSummary コントロールが使用できます。ValidationSummary コントロールを使用することで、各検証コントロールの ErrorMessage プロパティに設定したエラーメッセージを ValidationSummary コントロールを配置した箇所にまとめて表示させることができます。では、実際に何種類かの検証コントロールを使ってエラーメッセージをまとめて表示してみましょう。

サンプルフォームを準備する

はじめに、名前と名前の読み仮名を入力するページを用意します（リスト1 および図1）。


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table border="1">
        <tr>
            <td colspan="2">
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LabelName" runat="server" Text="名前（必須）:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextName" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LabelNameKana" runat="server" Text="名前（カナ）:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextNameKana" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="ButtonRegist" runat="server" Text="登録" />
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

リスト1．Default.aspx

図1 Default.aspx のデザイナ画面

検証コントロールを配置する

次に、[名前] を必須項目とし、[名前（カナ）] にカタカナのみ受付けるように入力チェックを行います。次の手順で、検証コントロールを配置します。

1. [ツールボックス]-[検証] から ReauiredFieldValue を選択し、Default.aspx のデザイン画面へ貼り付けます（図2）。

2. 貼り付けた ReauiredFieldValue のプロパティウインドウを開きます。

3. [ControlToValidate] で「TextName」を選択し、検証する対象を指定します（図3）。

4. [Display] で「None」を指定し、ReauiredFieldValue 自体がエラーメッセージを表示しないように指定します（図4）。ただし、入力項目にエラーメッセージを表示しないまでも、エラーになった項目を強調したい場合には、[Display] で「Static」を指定して、[Text] に「＊」を入力し、検証がエラーのとき対象の項目に＊マークを表示させることもできます。

5. [ErrorMessage] に「名前（必須）は、必須項目です。」と入力し、検証結果が失敗だったときに ValidationSummary に表示するメッセージを指定します（図5）。

図2. ReauiredFieldValue を貼り付けた状態

図3. ControlToValidate プロパティ

図4. Display プロパティ

InputCheck3_fig05

図5. ErrorMessage プロパティ

6. [ツールボックス]-[検証] から RegularExpressionValidator を選択し、Default.aspx のデザイン画面へ貼り付けます（図6）。

7. 貼り付けた RegularExpressionValidator のプロパティウインドウを開きます。

8. [ControlToValidate] で「TextNameKana」を選択し、検証する対象を指定します（図7）。

9. [ValidationExpression] に「^[ァ-ー]+$」と入力し、全角のカタカナか検証する正規表現を指定します（図8）。

10. [Display] で「None」を指定し、RegularExpressionValidator 自体がエラーメッセージを表示しないように指定します（図9）。ただし、入力項目にエラーメッセージを表示しないまでも、エラーになった項目を強調したい場合には、[Display] で「Static」を指定して、[Text] に「＊」を入力し、検証がエラーのとき対象の項目に＊マークを表示させることもできます。

11. [ErrorMessage] に「名前（カナ）は、カタカナで入力してください。」と入力し、検証結果が失敗だったときに ValidationSummary に表示するメッセージを指定します（図10）。

図6. RegularExpressionValidator を貼り付けた状態

図7. ControlToValidate プロパティ

図8. ValidationExpression プロパティ

図9. Display プロパティ

図10. ErrorMessage プロパティ

エラーメッセージを表示する

次に、各検証コントロールで検証がエラーになったときにメッセージを表示する ValidationSummary コントロールを配置します。次の手順で、検証コントロールを配置します。

1. [ツールボックス]-[検証] から ValidationSummary を選択し、Default.aspx のデザイン画面へ貼り付けます（図11）。

2. 貼り付けた RangeValidator のプロパティウインドウを開きます。

3. [HeaderText] に「入力欄で以下のエラーが発生しました。」と入力し、検証コントロールでエラーが発生したときに表示するヘッダーテキストを指定します（図12）。

図11. ValidationSummary を貼り付けた状態

図12. HeaderText プロパティ

以上の設定が完了すると、Default.aspx は、リスト2 になり、実行結果は図13 のようになります。


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="MyForm" runat="server">
    <div>
    <table border="1">
        <tr>
            <td colspan="2">
                <asp:ValidationSummary ID="ValidationSummary1" runat="server"
                HeaderText="入力欄で以下のエラーが発生しました。" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LabelName" runat="server" Text="名前（必須）:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                ErrorMessage="名前（必須）は、必須項目です。"
                ControlToValidate="TextName"
                Display="None"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LabelNameKana" runat="server" Text="名前（カナ）:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextNameKana" runat="server"></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
                ErrorMessage="名前（カナ）は、カタカナで入力してください。"
                ControlToValidate="TextNameKana"
                ValidationExpression="^[ァ-ー]+$"
                Display="None"></asp:RegularExpressionValidator>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="ButtonRegist" runat="server" Text="登録" />
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

リスト2．Default.aspx