ここでは、フォームの必須項目欄が入力されているかどうかをチェックする方法について説明します。フォームに必須項目が入力されていればフォームを送信し、入力されていなければアラートを表示し送信を取りやめます。
サンプルプログラム
HTML
|
1 2 3 4 5 |
<form metod="post" name="form1" action="result.html"> 氏名（必須） ：<input type="text" name="input01" size="20"><br/> ふりがな（必須）：<input type="text" name="input02" size="20"><br/> <input type="submit" value="送信" onclick="return checkForm();"> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 |
function checkForm(){ if(document.form1.input01.value == "" || document.form1.input02.value == ""){ alert("必須項目を入力して下さい。"); return false; }else{ return true; } } |
このプログラムでは、必須項目欄のvalue属性が空文字かどうかを判定することで必須項目欄のチェックを行っています。それぞれの必須項目欄のvalue属性は、
|
1 |
document.form1.input01.value |
のようにタグのname属性を使って取得しています。
必須項目が入力されていない場合はfalseを返し、アラートで警告します。
返り値に応じてサブミットするか否かを制御するには、onclick=""で呼び出す関数の前に「return」を記述します。返り値がtrueならサブミットし、falseならサブミットしません。
