FORMデータを提出前に検査する方法

FORMへの書き込みの不備などをCGIに送る直前にチェックすることが できます。以下の例はFORMに一つでも書き込まれていない項目が あれば警告windowを開いて、FORMのCGIへの送信を行いません。

スクリプトソース

<SCRIPT LANGUAGE="JavaScript">
<!--
function checkForm( form )
{
  for( i=0 ; i<form.elements.length ; i++ ){
    if( form.elements[i].value == "" ){
      alert("Write something!");
      return false;
    }
  }
  return true;
}
// -->
</SCRIPT>

<FORM METHOD="POST" ACTION="" onSubmit="return checkForm( this )">
Write something: <INPUT TYPE="TEXT" NAME="input0"><BR>
Write something: <INPUT TYPE="TEXT" NAME="input1"><BR>
Write something: <INPUT TYPE="TEXT" NAME="input2"><BR>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
</FORM>

スクリプト実行結果

Write something:
Write something:
Write something:

onSubmitでSUBMITボタンが押されたときに起動するイベントハンドラ の関数をこのように指定します。引数の this はここがFORMタグ内なので このformを管理するobjectの意味になります。 イベントハンドラの関数はSCRIPTタグで囲んだ別の所で定義します。

イベントハンドラの関数 CheckForm() では、与えられたFORMの 項目の数だけ各要素の値が空でないかを検査して、もし空なら 警告windowを表示させ、falseを返すことでFORMにCGIの起動を辞めさせます。 すべての項目が空でなければ、trueを返すことでFORMにCGIの起動を 始めさせます。