第31回 「テキストフィールドの空欄チェック（３）」
前回は空欄チェックのプログラムを作成しましたが、テキストフィールドが複数ある場合には期待通り動作しませんでした。（以下は、うまくいかなかった前回のプログラム）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check()
{
txt = document.forms[0].elements[0].value;
if (txt == "") alert("未入力です");
}
// --></script>
</head>
<body>
<form>
<input type="text" onBlur="check()">
<input type="text" onBlur="check()">
</form>
</body>
</html>
上記プログラムは調べるテキストフィールドが決まっているため常に一番最初のフォームの一番最初のエレメント（上記プログラムではテキストフィールド）の空欄チェックとなってしまいます。
関数に自分自身のフォーム内での位置である参照番号を渡して調べる方法があります。これは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(n)
{
txt = document.forms[0].elements[n].value;
if (txt == "") alert("未入力です");
}
// --></script>
</head>
<body>
<form>
<input type="text" onBlur="check(0)">
<input type="text" onBlur="check(1)">
</form>
</body>
</html>
この方法でも問題なく調べることができますが、フォーム内でのテキストフィールドの位置が変わったら、番号を指定し直さなければいけません。そのような場合にミスをしてしまう可能性もあります。そうなると上記の方法は良い方法とは言えません。
フォームやテキストフィールドの位置に依存しないようにするには、以前でてきた自分自身を示すthisを使います。thisは自分自身、テキストフィールドであれば、それ（テキストフィールド）を示します。テキストフィールドの内容を関数の引数として渡して空欄チェックを行えばフォームの位置やエレメントの位置などに依存しないものができます。
実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(txt)
{
if (txt == "") alert("未入力です");
}
// --></script>
</head>
<body>
<form>
<input type="text" onBlur="check(this.value)">
<input type="text" onBlur="check(this.value)">
</form>
</body>
</html>
関数の引数に入るのがテキストフィールドに入力された文字になります。関数内では、その文字が空かどうかを調べてアラートダイアログを表示します。
この方法であれば単純にテキストフィールドを増やしても問題なく動作させることができます。スクリプトを修正したりする必要もないためミスも防ぐ事ができます。
次回はデータ送信時に空欄チェックを行うようにしてみます。