WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

ValidationSummary の表示

by WebSurfer 2010年9月8日 12:27

TextBox への入力を RequiredFieldValidator, RegularExpressionValidator でチェックし、エラーメッセージを ValidationSummary で表示するようにしたとします。以下のような感じです。

SummartValidator の表示

上の画面を表示したコードは以下のようになります。

<asp:TextBox ID="TextBox1" runat="server" />  
<asp:RequiredFieldValidator 
  ID="RequiredFieldValidator1"    
  runat="server" 
  ErrorMessage="入力必須" 
  ControlToValidate="TextBox1" 
  Text="*" 
  ForeColor="Red" />
<asp:RegularExpressionValidator 
  ID="RegularExpressionValidator1" 
  runat="server" 
  ErrorMessage="正しい郵便番号が必要" 
  ControlToValidate="TextBox1" 
  ValidationExpression="\d{3}(-(\d{4}|\d{2}))?" 
  Text="*" 
  ForeColor="Red" />
<br />
<asp:Button ID="Button1" 
  runat="server" 
  Text="実行" />  
<asp:ValidationSummary ID="ValidationSummary1" 
  runat="server" 
  ShowMessageBox="True" 
  ShowSummary="False" />    

TextBox にフォーカスがあるとき Enter キーを押すと form が submit(ポストバック)されますが、この時に入力が不正だった場合、期待した動作をするでしょうか?

ちなみに、期待した動作とは以下のとおりです。

  1. ポストバックがキャンセルされる。
  2. TextBox1 の横に「*」が表示される。
  3. エラーメッセージが ValidationSummary に表示される。

上記のコードで試してみると、1, 2 は実行されますが、3 は実行されないという結果になりました。IE8, Firefox 3.6.8, Opera 10.61 で同じ結果でした。

なお、Button1 をクリック(もしくは Button1 にフォーカスを当てて Enter キーを押す)した場合は、上記 1. 2, 3 すべて実行されます。それが、上の画像です。

TextBox にフォーカス → Enter キーでは、自動生成される検証用の JavaScript の一部のコードがスキップされることが原因です。何故スキップされるのか理由は分かりませんが。

対応策としては、ハック的なのでお勧めはできませんが、以下のようにすると、TextBox にフォーカス → Enter キーでも ValidationSummary が表示されるようになります。

protected void Page_Load(object sender, EventArgs e)
{
  TextBox1.Attributes.Add("onkeydown", 
    "if (event.keyCode == 13) Page_ClientValidate();");
}

Page_ClientValidate メソッドは引数に validationGroup を取りますが、上記のように空にしておいても正しく処置してくれるようです(IsValidationGroupMatch は true 返すので)。

TextBox にフォーカス → Enter キーで ValidationSummary が表示されないようになっているのには何か理由があって、無理に上記のようなことをすると予期せぬ副作用が出るのかもしれませんので、注意してください。

---------- 2011/4/30 追記 ----------

やっぱり予期せぬ副作用がありました。(汗)

まず、検証対象の TextBox が複数ある場合、onkeydown 属性に上記のような小細工をすると ValidationSummary がダブって出てしまい、期待した動きになりません。例えば、以下のコードで、一方の TextBox の入力が正しくて、他方が NG のとき、正しい方の TextBox にフォーカスを当てて Enter キーを押すと不具合が出ます。

もうひとつの問題は、オートコンプリート機能を利用する際、ドロップダウンリストに表示される選択肢を Enter キーで確定できなくなることです。

実際に試せるように 実験室 にアプリケーションをアップしておきましたので、興味のある方は試してみてください。

<%@ Page Language="C#" %>

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

<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
    TextBox1.Attributes.Add("onkeydown", 
      "if (event.keyCode == 13) Page_ClientValidate();");
    TextBox2.Attributes.Add("onkeydown",
      "if (event.keyCode == 13) Page_ClientValidate();");
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    郵便番号:
    <asp:TextBox id="TextBox1" runat="server" />  
    <asp:RequiredFieldValidator 
      ID="RequiredFieldValidator1"    
      runat="server" 
      ErrorMessage="入力必須" 
      ControlToValidate="TextBox1" 
      Text="*" 
      ForeColor="Red" 
      Display="Dynamic" />
    <asp:RegularExpressionValidator 
      ID="RegularExpressionValidator1" 
      runat="server" 
      ErrorMessage="正しい郵便番号が必要" 
      ControlToValidate="TextBox1" 
      ValidationExpression="\d{3}(-(\d{4}|\d{2}))?" 
      Text="*" 
      ForeColor="Red" 
      Display="Dynamic" />
    <br />
    メールアドレス:
    <asp:TextBox id="TextBox2" runat="server" />  
    <asp:RequiredFieldValidator 
      ID="RequiredFieldValidator2"    
      runat="server" 
      ErrorMessage="入力必須" 
      ControlToValidate="TextBox2" 
      Text="*" 
      ForeColor="Red" 
      Display="Dynamic" />
    <asp:RegularExpressionValidator 
      ID="RegularExpressionValidator2" 
      runat="server" 
      ErrorMessage="正しいメールアドレスが必要" 
      ControlToValidate="TextBox2" 
      ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
      Text="*" 
      ForeColor="Red" 
      Display="Dynamic" />
    <br />
    <asp:Button id="Button2" 
      runat="server" 
      Text="検証" />  
    <asp:ValidationSummary id="ValidationSummary1" 
      runat="server" 
      ShowMessageBox="True" 
      ShowSummary="False" 
      HeaderText="サマリーです" />
  </div>
  </form>
</body>
</html>

Tags:

Validation

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2017年1月  >>
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar