Webフォームに複数の検証コントロールとボタンがある場合、ボタンをクリックするとすべての検証コントロールが動作してしまいます。クリックされるボタンによって、動作する検証コントロールを切り替えたい場合があります。この記事では、ValidationGroupを用いて対象となる検証コントロールを切り替える手順を紹介します。
現象の確認
現象を確認します。
UI
下図のUIを作成します。TextBox, RequiredValidator, Buttonを3つづつ配置します。
検証コントロールのVontrolToValidateには検証コントロールの隣のTextBoxを指定します。
コード (default.aspx)
UIのコードは以下になります。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ValidationGroupDemo._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="入力されていません" ControlToValidate="TextBox1" ValidationGroup="Group01"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" ValidationGroup="Group01" />
<hr />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="入力されていません" ControlToValidate="TextBox2" ValidationGroup="Group02"></asp:RequiredFieldValidator>
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" ValidationGroup="Group02" />
<hr />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="入力されていません" ControlToValidate="TextBox3" ValidationGroup="Group03"></asp:RequiredFieldValidator>
<asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" ValidationGroup="Group03" />
<hr />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
コード
下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ValidationGroupDemo
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Button1がクリックされました。入力は"+TextBox1.Text;
}
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "Button2がクリックされました。入力は" + TextBox2.Text;
}
protected void Button3_Click(object sender, EventArgs e)
{
Label1.Text = "Button3がクリックされました。入力は" + TextBox3.Text;
}
}
}
実行結果
プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。
3つのボタンのうちの1つをクリックします。どのボタンをクリックしても、すべてのテキストボックスで、RequiredFieldValidatorの[入力されていません]エラーが表示されます。
テキストボックスの1つに値を入力しボタンをクリックしても、残りのRequiredFieldValidatorのエラーメッセージが表示されます。ボタンのクリックイベントも実行されません。
意図する動作
ボタンをクリックした際に、ボタンの左隣にあるテキストボックスのみ検証を実施し、他のテキストボックスの入力が空であった場合でも、ボタンのクリックイベントを実行する動作が本来実装したい動作です。
ValidationGroupの設定
先ほどのプログラムにおいて、ValidationGroup を検証コントロールに設定し、意図した動作になるようにします。
検証コントロールを選択します。"ValidationGroup"プロパティを選択します。
ValidationGroup プロパティに"Group01"を入力します。
次に、隣のボタンコントロールを選択し、ValidationGroup プロパティを設定します。
こちらも"Group01"を設定します。
2番目の検証コントロールとボタンのValidationGroupプロパティには"Group02"を設定します。
3番目の検証コントロールとボタンのValidationGroupプロパティには"Group03"を設定します。
実行結果
プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。
一番上のボタンをクリックします。一番上のテキストボックスの検証のみが実行されます。ボタンに設定したValidationGroupと同じグループの検証コントロールのみが検証の対象となります。
2番目、3番目のボタンをクリックした場合も、隣にあるテキストボックスの検証のみが実行されます。
対象となるテキストボックスのみが検証の対象となるため、すべてのテキストボックスに値が入力されていなくてもボタンのClickイベントは実行されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2014-07-13