フォームのリアルタイム入力チェック

質問

現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、
エラーがあれば、送信されないようものを使っております。
送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、
入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。
エラーがあれば、下記のように隠しているメッセージなどが表示され、
問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。
で構いません。
よろしくお願い致します。

・htmlファイル
<div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div>
<form name="mailform" method="post" action="index.php" onsubmit="return formCheck()">
<!--テキスト-->
<div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div>
<input type="text" name="text1" /><br />
<div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div>
<input type="text" name="text2" /><br />
<div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div>
<input type="text" name="text3" /><br />

・JSファイル
function formCheck(){
var flag = 0;
if(document.mailform.text1.value==""){
flag = 1;
document.getElementById('text1').style.display="block";
}else{
document.getElementById('text1').style.display="none";
}
if(document.mailform.text2.value==""){
flag = 1;
document.getElementById('text2').style.display="block";
}else{
document.getElementById('text2').style.display="none";
}
if(document.mailform.text3.value==""){
flag = 1;
document.getElementById('text3').style.display="block";
}else{
document.getElementById('text3').style.display="none";
}
if(flag){
document.getElementById('notice-form').style.display="block";
return false;
}else{
document.getElementById('notice-form').style.display="none";
return true;
}
}

回答No.1

noname#247307

まぁ、普通に考えれば、タイマーを使うのが一番手っ取り早いでしょう。ページロード時に、setIntervalで短い間隔でバリデーションの処理を繰り返し実行するように設定しておくわけですね。