第29回 「テキストフィールドの空欄チェック（１）」
前回はフォームへの参照について説明しました。今回はテキストフィールドの空欄チェックを行います。
テキストフィールド内容が変更されたかどうかはonChangeイベントを使います。試しに以下のようにしてテキストフィールド内容を変化させるとアラートダイアログが表示されます。
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" onChange="alert()">
</form>
</body>
</html>
alert()の代わりにテキストフィールドの内容を読み出して空欄かどうかをチェックすればよさそうです。それではテキストフィールドの内容を読み出すには、どうすれば良いのでしょうか。実は前回サンプルで出てしまいましたがvalueを使えばテキストフィールドの内容を読み出すことができます。例えばフォーム名がDBでテキストフィールド名がADRSであれば以下のようにすると変数txtにテキストフィールドの内容が読み込まれます。
txt = document.DB.ADRS.value
注意しないといけないのは読み出されたデータは数字であっても文字列として認識される点です。*1
それでは実際に空欄チェックのスクリプトを見てみましょう。
<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>
フォーム、エレメントのHTMLでの出現順番は、ぞれぞれ最初なので0になります。そのテキストフィールドの内容を読み出すにはvalueを使いますので以下のように指定します。
txt = document.forms[0].elements[0].value;
ここで読み出された文字列（変数txtに入っています）に何か入っていたら何もせず、入っていなかったら（空欄だったら）アラートダイアログを表示するのですが、文字列が空（から）かどうかは""と比較します。つまり変数txtと比較するには以下のように書きます。
if (txt == "") alert("未入力です");
これで空欄チェックのスクリプトができあがりました。早速試してみましょう。
「あれ？」
何かおかしな場合があります。空欄のままの場合、何も入力しないと警告がでるはずが出ません。これはonChangeイベントに理由があります。onChangeイベントは内容が変化した時に発生するので「空欄のまま」→「何も入力せず空欄のまま」だとイベントが発生しないのです。
次回は、きちんと動く空欄チェックのプログラムに改良してみます。
*1 ブラウザによっては文字列でなく数字となってしまうものもありますので対象とするブラウザ上で確認するのが確実です。