第33回 「送信時に空欄チェックを行う（２）」
今回は送信時に空欄があったら送信しないようにする方法について説明します。
送信ボタンが押されたらイベントが発生しformタグ内に書かれたonSubmitで指定されたJavaScriptの命令が実行されます。通常は
<form onSubmit="check()">
のように実行する関数を記述します。前回はこのように書かれていましたが、このままではデータは送信されてしまいます。テキストフィールドが空欄であっても、結局送られてしまうのは期待する処理とは違います。
実はonSubmitは関数からの戻り値に応じてデータを送信するか、しないかを決定します。関数からの戻り値はtrueかfalseで、それぞれ以下のようになります。
true ... 送信する
false .. 送信しない
まだ戻り値について説明していませんでした。関数の説明部分で行えば良かったかもしれません。戻り値は関数内で処理した後に呼び出し元に返す値です。値と言っても数値だけでなく文字列や配列なども返すことができます。この戻り値を指定するのがreturnという命令です。例えば123.45という数値を戻り値にするならば
return 123.45
のようになります。文字列の"ABC"ならば
return "ABC"
のようになります。ただし、この命令を実行したら強制的に関数の処理を終わらせて（中断して）呼び出し元に戻ってしまいます。これ以上関数内で処理を続けたくない場合にreturnで呼び出し元に戻すこともできます。このような場合、戻り値がなくても大丈夫です。単に
return
とするだけです。
さて本題に戻ります。要するに関数check内でテキストフィールドが空欄だったら戻り値をfalse、そうでなければtrueにします。
前回のプログラムに上記処理を付け加えたものが以下のスクリプトです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
for (i=0; i<3; i++)
{
txt = document.forms[0].elements[i].value;
if (txt == "")
{
alert("未入力です");
return false;
}
}
return true;
}
// --></script>
</head>
<body>
<form onSubmit="return check()" action="mailto:javascript@po.shiojiri.ne.jp">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="送信">
</form>
</body>
</html>
空欄の場合は送信されず、すべて入力されている場合のみ送信されます。
ただ、実際の入力フォームには単純にテキストフィールドのみが都合良く順番に並んでいるわけではありません。ラジオボタンやチェックボックスなども混在しています。そのような場合、今回のようにやみくもにforループを使ってelements[i]のように順番に参照していく事が難しくなります。
次回は、そのような場合どのように空欄をチェックすれば良いか説明します。