memo.xight.org

日々のメモ

validate.js と setInterval を利用したフォームの入力チェック

Summary

validate.js[2006-01-06-4] を利用してみた.
オートコンプリートからマウスで選択した直後に,validate結果が更新されない.

インフォアクシアのお問い合わせでは setInterval(func,ms) を利用して
定期的に入力フォームのチェックを行っている.

validate.jsでvalidate結果表示を更新するには,Behaviour.apply() を呼び出せばよい.

Source

以下の記述で500ms毎にvalidate結果を更新する.
<body onload="setInterval('Behaviour.apply();',500">
...
</body>


注意

無差別に全フォームのチェックを行ったり,極端にインターバルの時間を短くしたりすると,処理が重くなる.

インフォアクシアのお問い合わせでは,入力内容が変更された時のみ,
入力チェックを呼び出すようにしている.

処理の軽量化

prototype.js を利用しているため $F('elemId') でフォームの内容を呼び出している.
var nameTmp  = '';
var mailTmp  = '';

function isChangeForm(){
	var ret = false;
	if (nameTmp != $F('name') || mailTmp != $F('mail')){
		nameTmp = $F('name');
		mailTmp = $F('mail');
		ret = true;
	}
	return ret;
}

function updateForm(){
	if (isChangeForm()){
		Behaviour.apply();
	}
	return;
}


<body onload="setInterval('updateForm();',500">
...
</body>


Reference

インフォアクシア - お問い合わせ
https://www.infoaxia.co.jp/forms/com/contact/