- 締切済み
RegularExpressionValidatorのタイミング
はじめまして VS2005でasp.netでwebサイトの開発をしているものです 質問なのですが RegularExpressionValidatorの検証機能のタイミングを フォーカスが離れたときではなく入力されたときにしたいのですが できますでしょうか? RegularExpressionValidatorのControlToValidateを テキストボックスに指定して、ValidationExpressionに正規表現を 設定する簡単な検証なのですが、 現在、この検証を行うタイミングがフォーカスが離れた瞬間 なのですが、これをキー操作で入力した瞬間に正規表現に 適さない場合はすぐにErrorMessageを出すようにしたいです このようなことは可能なのでしょうか? ご存知の方ご回答の方、よろしくお願いします
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- kero_mio
- ベストアンサー率90% (94/104)
まず、キーが入力された段階でチェックさせるには、 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