入力検証エラーをバルーン表示(ValidatorCallout)

閲覧総計：10647　　（本日：1　　昨日：1)

　Ajax Control Toolkitは、入力検証エラーメッセージをバルーン表示してくれる
便利なValidatorCallout Extenderという部品を提供してくれている。
早速使ってみた。　09/08/14

　ASP.NETは標準機能として各種Validate機能を用意してくれている。しかし、入力
検証エラーメッセージが画面レイアウトを大きく乱してしまうという欠点を持って
いた。このValidatorCalloutは、この欠点を改善してくれる便利な部品である。
　特に<table>タグを用いて画面レイアウトを設計している場合などに効果大である。
※説明：検証エラーメッセージによるレイアウト崩れが解消

　ValidatorCalloutの使い方を「Web-Deli」さんの下記ページを参考にし、確認した。
http://www.web-deli.com/tutorial.aspx?id=ASP-TTR-00057

開発環境：VWD2005+AJAX1.0+Toolkit + SQL Server2005
サーバ：ASP.NET2.0+AJAX1.0 + SQL Server2005

【機能】名前と年齢の入力に対し検証を行い、エラーメッセージはバルーン表示する。

【稼動サンプル】
http://www.kuri6005.useiis7.net/AjaxTr/Toolkit/ValidatorCallout.aspx

作成時の画面(VWD2005) ▼

(参考)VWD2008での作成時の画面 ▼　Extender部品は表示されずWYGIWYGレイアウトが出来る様になっている。

コントロールの設定値

コントロール	プロパティ	値	コメント
RequiredFieldValidator	(ID)	RequiredFieldValidator1	入力必須チェック
	ControlToValidate	TextBox1
	SetFocusOnError	True	エラー時問題ヶ所へカーソル移動
	Display	None	2重表示にならぬ様消し
	ErrorMessage	名前は必須です
ValidatorCalloutExtender	(ID)	ValidatorCalloutExtender1	バルーン AJAX Toolkit
ValidatorCalloutExtender	TargetControlID	RequiredFieldValidator1
RequiredFieldValidator	(ID)	RequiredFieldValidator2	入力必須チェック
	ControlToValidate	TextBox2
	SetFocusOnError	True	エラー時問題ヶ所へカーソル移動
	Display	None	2重表示にならぬ様消し
	ErrorMessage	年齢は必須です
ValidatorCalloutExtender	(ID)	ValidatorCalloutExtender2	バルーン AJAX Toolkit
ValidatorCalloutExtender	TargetControlID	RequiredFieldValidator2
RangeValidator	(ID)	RangeValidator1	データ範囲チェック
	ControlToValidate	TextBox2
	MaximumValue	100
	MinimumValue	0
	SetFocusOnError	True	エラー時問題ヶ所へカーソル移動
	Type	Integer	整数に設定
	Display	None	2重表示にならぬ様消し
	ErrorMessage	年齢は0～100の間で
ValidatorCalloutExtender	(ID)	ValidatorCalloutExtender3	バルーン AJAX Toolkit
ValidatorCalloutExtender	TargetControlID	RangeValidator1

【ValidatorCallout.aspx】

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        名前：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="名前は必須です" ControlToValidate="TextBox1" Display="None" SetFocusOnError="True"></asp:RequiredFieldValidator>
        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1">
        </cc1:ValidatorCalloutExtender>
        <br />
        年齢：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
            Display="None" ErrorMessage="年齢は必須です" SetFocusOnError="True"></asp:RequiredFieldValidator>
        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2">
        </cc1:ValidatorCalloutExtender>
        <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox2"
            Display="None" ErrorMessage="年齢は0～100の間で" MaximumValue="100" MinimumValue="0" SetFocusOnError="True" Type="Integer"></asp:RangeValidator>
        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="RangeValidator1">
        </cc1:ValidatorCalloutExtender>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" /></div>
    </form>
</body>
</html>

【参考にしたページ】
1.Web-Deli：ValidatorCalloutコントロール（AJAX Control Toolkit）　07/12/03
http://www.web-deli.com/tutorial.aspx?id=ASP-TTR-00057

説明：検証エラーメッセージによるレイアウト崩れが解消 ↑

ふぁｄふぁ -- 2014-04-30 (水) 13:34:00

お名前:

選択肢 投票

参考になった 10

ふつう 0

参考にならなかった 0

入力検証エラーをバルーン表示(ValidatorCallout)

今日の10件

最新の15件

説明：検証エラーメッセージによるレイアウト崩れが解消 ↑