javascript でテキスト入力中にすぐメッセージを出してきているものがあります。下記のような例です。

input タグの中にイベントハンドラがないようなのですが、どのようにやっているのでしょうか?
http://livevalidationphp.leihitu.nl/index.php?page=home

同様のことを行っている簡潔なサンプルコードがあったらお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/10/12 15:11:40
  • 終了:2007/10/19 15:15:04

回答(2件)

id:Yuhto No.1

Yuhto回答回数19ベストアンサー獲得回数02007/10/12 16:04:27

ポイント35pt

HTMLを覗いたところ、

	<form name='frmTestLive' id='frmTestLive' action='' method='post'>
		<input type='hidden' name='action' value='send_test_form'>
		I dare you to say "hello"<br>
		
		<p>
			<input type='text' id='test_hello' name='test_hello' value=''> <input type='submit' value='press me'>
		</p>
		
	</form>
	
	<script>
		var lvphp_bce5e3bb3f6c53554edc413fa24dff68 = new LiveValidation( "test_hello", { validMessage:"Ait you go girl!" } );
lvphp_bce5e3bb3f6c53554edc413fa24dff68.add( Validate.Presence);
lvphp_bce5e3bb3f6c53554edc413fa24dff68.add( Validate.Format, { pattern:/^hello$/i,failureMessage:"Chicken!That was not a hello" } );

var lvphp_frm_8069e461c971e06f812f0a9a6c28aa77 = document.getElementById( "frmTestLive" );
lvphp_frm_8069e461c971e06f812f0a9a6c28aa77.onsubmit = function(e){
var result_frmTestLive=LiveValidation.massValidate([lvphp_bce5e3bb3f6c53554edc413fa24dff68]);
return result_frmTestLive;
};
	</script>

となっており、HTML出力直後に、

該当する入力域のtest_helloという識別子が、new LiveValidationという、コンストラクタに該当エレメント名がわたされています。

そこで、参照されている、

http://livevalidationphp.leihitu.nl/assets/scripts/livevalidatio...

を見ると、該当エレメントのonkeyupイベントなどにチェックを実行する関数が割り当てられているようです。

参考としては、以下のURLが読みやすいかもしれません。

http://www.microsoft.com/protect/yourself/password/checker.mspx

このJS手法を外部化(JSファイル)にして汎用性をもたせたのが、

該当URLの

http://livevalidationphp.leihitu.nl/index.php?page=home

のような手法といえるかと思います。

id:isogaya

ありがとうございます。マイクロソフトの方がonKeyUpをいれているのでわかりやすいですね。

ありがとうございます。

2007/10/12 16:40:30
id:cuspos No.2

cuspos回答回数49ベストアンサー獲得回数102007/10/14 12:06:46

ポイント35pt

こんにちは。

http://blog.g-up.com/hidenori_goto/?s=2&b=10146

にサンプルがあります。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません