• 締切済み

RegularExpressionValidatorのタイミング

はじめまして VS2005でasp.netでwebサイトの開発をしているものです 質問なのですが RegularExpressionValidatorの検証機能のタイミングを フォーカスが離れたときではなく入力されたときにしたいのですが できますでしょうか? RegularExpressionValidatorのControlToValidateを テキストボックスに指定して、ValidationExpressionに正規表現を 設定する簡単な検証なのですが、 現在、この検証を行うタイミングがフォーカスが離れた瞬間 なのですが、これをキー操作で入力した瞬間に正規表現に 適さない場合はすぐにErrorMessageを出すようにしたいです このようなことは可能なのでしょうか? ご存知の方ご回答の方、よろしくお願いします

みんなの回答

  • kero_mio
  • ベストアンサー率90% (94/104)
回答No.1

まず、キーが入力された段階でチェックさせるには、 JavaScriptの力を借りる必要があります。 ただ、RegularExpressionValidatorには、JavaScriptで チェックさせるプロパティはありません。 CustomValidatorであれば、JavaScriptでチェックできますが、 それだと、Focusを離れた場合でしか、チェックができません。 そこで、チェック対象のテキストボックスにJavaScriptの onKeyPressイベントを感知するようにし、onKeyPressイベントを 処理するJavaScriptを記述します。 そのJavaScriptで正規表現チェックを行い、エラーがあれば、 RegularExpressionValidatorのErrorMessageを visibilityを設定することによって、表示させます。 サンプルを作りましたので、ご参考頂ければと思います。 サンプルは、99:99の書式&5桁かをチェックしています。 5桁目が入力された段階でチェックするようにしています。 また、IEでしか動作確認してませんので、FireFoxや他のブラウザ に対応させるには、もう少しカスタマイズが必要です。 ■Default2.aspx <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無題のページ</title> <script language="JavaScript" type="text/javascript"> function TextBoxControl_Validate(e, textboxId, regularexpressionValidatorId) {   // エラーメッセージを一旦非表示にする   var errorMessage = document.getElementById(regularexpressionValidatorId);   if ( errorMessage == null ) { return false; }   errorMessage.style.visibility = "hidden";   // チェック対象のテキストボックスの取得   var checkTextBox = document.getElementById(textboxId);   if ( checkTextBox == null ) {     return false;   }   // 入力値を取得する   var key = null;   if(window.event)   {     key = e.keyCode   }   else if(e.which)   {     key = e.which   }   var inputChar = String.fromCharCode(key);   // 既に入力されている値と今入力した値の桁数が5桁でない場合   if ( !(checkTextBox.value.length + inputChar.length == 5) )   {     return true;   }   // 正規表現でチェック   var str = checkTextBox.value + inputChar;   if (str.match(/^\d{2}\:\d{2}$/))   {     return true;   }   else   {     // エラーメッセージの表示     errorMessage.style.visibility = "visible";     // 入力文字が消えるため、戻り値はTrueにしておく     return true;   }   return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:RegularExpressionValidator   ID="RegularExpressionValidator1"   runat="server"   ControlToValidate="TextBox1"   ErrorMessage="エラーです。"   SetFocusOnError="True"   ValidationExpression="\d{2}\:\d{2}" /> <br /> <asp:TextBox ID="TextBox1" runat="server" MaxLength="5" /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> </html> ■Default.aspx.vb Partial Class Default2   Inherits System.Web.UI.Page   Protected Sub RegularExpressionValidator1_Init(ByVal sender As Object, ByVal e As System.EventArgs) _                      Handles RegularExpressionValidator1.Init     If Not IsPostBack Then       Dim keyPressScript As String       keyPressScript = String.Format("return TextBoxControl_Validate(event, '{0}', '{1}')", _                       Me.TextBox1.ClientID, _                       Me.RegularExpressionValidator1.ClientID)       Me.TextBox1.Attributes.Add("onKeyPress", keyPressScript)     End If   End Sub End Class

関連するQ&A