第30回 「テキストフィールドの空欄チェック（２）」
前回は空欄チェックのプログラムを作成しました。（以下は前回のプログラム）
<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" onChange="check()">
</form>
</body>
</html>
しかし、状況によってはうまく動作しませんでした。これはonChangeイベントに問題があるためです。onChangeイベントではなく別のイベントを使って解決します。テキストフィールドに文字を入力した後にチェックすれば良いとすればonBlurイベントを利用する事ができます。onBlurイベントは「フォーカスが外れた」時に発生します。テキストフィールドに入力する時に「テキストフィールドにフォーカス」され入力後に別の部分をクリックしたりすると「テキストフィールドからフォーカスが外れ」ます。
それではプログラムを変更しましょう。onChangeをonBlurにします。
<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()">
</form>
</body>
</html>
動作を確認してみると今度は期待通りです。ただ、通常の場合入力フォームの項目が１つだけしかないというのは、ほとんどありません。テキストフィールドが複数ある場合には上記プログラムでは不都合な部分があります。例えば以下のようにテキストフィールドを２つに増やしてみます。
<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>
１つめのテキストフィールドは正しく空欄チェックが働きますが２つめのテキストフィールドは、うまく動作しません。これはスクリプト内の以下の部分、
txt = document.forms[0].elements[0].value;
に原因があります。テキストフィールドを参照するために番号を使って指定しているため、このままでは常に一番最初のテキストフィールドが空欄かどうかをチェックする事になってしまいます。
次回は複数のテキストフィールドの空欄チェックについて説明します。