基本的な仕組みが完成したら、次は動作テストをしながら修正を加えます。
特に利用者の立場で、分かりやすく間違いのない仕組みにして行きます。
実例（p8.html）
フォームの送信時にユーザー関数でチェックは行いますが、できれば事前に分かりやすくしておくべきです。
まずは、フォームに注意書きを追加しましょう。
<textarea name="order_text" cols="90" rows="10" readonly id="order_text"></textarea>
<table border="0">
<tr>
<th>お名前</th>
<td><input name="name" type="text" id="name" size="50">*</td>
</tr>
<tr>
<th>ご住所(1)</th>
<td><input name="add1" type="text" id="add1" size="50">*</td>
</tr>
<tr>
<td align="center">ご住所(2)</td>
<td><input name="add2" type="text" id="add2" size="50"></td>
</tr>
<tr>
<th>電話番号</th>
<td><input name="tel" type="text" id="tel" size="50">*</td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input name="mail" type="text" id="mail" size="50">*</td>
</tr>
<tr>
<td align="center">連絡事項</td>
<td><input name="sonota" type="text" id="sonota" size="50"></td>
</tr>
</table>
<div align="center">*は入力必須項目です。</div>
<div class="menutitle"><input type="submit" value="送信"></div>
名前、住所(1)、電話番号、メールアドレスの入力項目の後ろに「*」を置き、それらが何を意味するのかテーブルの下に注意書きを書き足します。
スクリプトにも少しだけ手を加えましょう。
function check_order2() {
//入力必須項目の確認
bool = true;
if (document.order.order_text.value == "") bool = false;
if (document.order.name.value == "") bool = false;
if (document.order.add1.value == "") bool = false;
if (document.order.tel.value == "") bool = false;
if (document.order.mail.value == "") bool = false;
if (! bool) alert("入力必須の項目が未記入です。");
return bool;
}
if文を追加して、変数boolがfalseの場合にalert()で注意喚起をします。
変数boolは、数値でも文字でもなく、ブーリアン変数として利用し、この中にはtrueまたはfalseのどちらかを入れます。条件式は結果をtrueかfalseで判断しますが、ブーリアン変数は結果が入っているため「if (bool)」だけで条件式が表せます。
また、今回は条件式の最初に「!」を置いているため、条件を否定します。すなわち変数boolがfalseなら結果はtrueになるので、if文以降が真の場合に実行されることになります。
注文の確認がされるまで、送信ボタンを押せないようにします。
手順通りに操作がされるようにするため、最初はボタンを使用不可にしておき、手順が正しく行われたときにボタンを使えるようにするのです。
これに、入力必須項目の状況確認を組み合わせたら、完璧に入力漏れを防ぐことができるでしょう。
まず、フォーム上で送信ボタンの初期状態を使用不可にしてしまいましょう。
<div align="center">*は入力必須項目です。</div>
<div class="menutitle"><input type="submit" value="送信" id="b_submit" disabled></div>
</form>
<input>タグに属性の「disabled」を追加します。これは値の省略できる属性です。
また、スクリプトで操作することができるようにID名も付けておきます。
次に関連するスクリプトを作るのですが、まずは不要な部分をフォームから削除しましょう。
ユーザー関数check_order2()は送信ボタンを押したときに実行していましたが、チェック後にボタンを押すため、このユーザー関数を実行するタイミングを変更します。
まず、フォームから「onSubmit」を取り除きます。送信前にチェックするので、送信時は何もしなくて良いからです。
<div class="menutitle">注文フォーム</div>
<form name="order" action="order.cgi" method="post" onSubmit="return check_order2()">
<input type="hidden" name="mode" value="add">
青字部分を削除しましょう。
では、ユーザー関数check_order2()を改良します。
function check_order2() {
//入力必須項目の確認
bool = true;
if (document.order.order_text.value == "") bool = false;
if (document.order.name.value == "") bool = false;
if (document.order.add1.value == "") bool = false;
if (document.order.tel.value == "") bool = false;
if (document.order.mail.value == "") bool = false;
//if (! bool) alert("入力必須の項目が未記入です。");
document.getElementById("b_submit").disabled = (! bool);
return bool;
}
先ほど追加したif文は不要になるため削除またはコメントアウトしておきます。
最後のreturnも戻り値が不要になるため削除して、送信ボタンのプロパティを書き換える命令に変更します。disabledというプロパティは「使用不可」の状態がtrueなので、変数boolがfalseのときにtrueになるように式を作ります。
ここでは、右辺の式は()に入っていて、実はこれが条件式になっています。if文のときと同じ条件式です。記入漏れがあると変数boolはfalseで、条件式は逆転してtrueになります。
あとは、このユーザー関数をどこから呼び出すかが重要です。確認すべきタイミングを決めます。
注文確認ボタンを押したとき、入力必須の項目にデータを入力したときですね。
タイミングが決まったら、そこにイベント発生の処理を付け足します。
まず、注文確認ボタンを押したときの処理は、ユーザー関数check_order()の中です。
function check_order() {
var t,n;
（省略）
//確認画面の出力
document.order.order_text.value = t;
//入力状況の確認
check_order2();
}
ユーザー関数内の最後にユーザー関数check_order2()を呼びだします。
次に、個人情報の各必須の項目を変更した時なので、<input>タグでonChengeを利用します。
<div class="menutitle">注文確認</div>
<textarea name="order_text" cols="90" rows="10" readonly id="order_text"></textarea>
<table border="0">
<tr>
<th>お名前</th>
<td><input name="name" type="text" id="name" size="50" onChange="check_order2()">*</td>
</tr>
<tr>
<th>ご住所(1)</th>
<td><input name="add1" type="text" id="add1" size="50" onChange="check_order2()">*</td>
</tr>
<tr>
<td align="center">ご住所(2)</td>
<td><input name="add2" type="text" id="add2" size="50"></td>
</tr>
<tr>
<th>電話番号</th>
<td><input name="tel" type="text" id="tel" size="50" onChange="check_order2()">*</td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input name="mail" type="text" id="mail" size="50" onChange="check_order2()">*</td>
</tr>
<tr>
<td align="center">連絡事項</td>
<td><input name="sonota" type="text" id="sonota" size="50"></td>
</tr>
</table>
<div align="center">*は入力必須項目です。</div>
<div class="menutitle"><input type="submit" value="送信" id="b_submit" disabled></div>
４つの項目にonChangeを入れます。
このとき、<textarea>タグにはonChangeを入れません。というのも、ここも表示されていることが条件に入っていますが、スクリプトで内容を書き換えた場合、onChangeは発生しません。そのため、先ほど注文確認ボタンが押されたときとして、ユーザー関数check_order()実行時にユーザー関数check_order2()が実行されるようにしたのです。
そのため、あと１つ工夫が必要です。確認画面に表示がある場合はこれで良いのですが、数量を変更して確認画面が消えたときに送信ボタンがそのまま使える状態になってしまいます。
数量の項目は<select>タグで既にonChangeを利用していますので、そこから呼び出されるユーザー関数calc_number()を利用しましょう。
function calc_number(s) {
var t;
t = document.getElementById(s).value;
if (t == "-") snumber[s] = 0;
else snumber[s] = eval(t);
calc_price();
//注文確認を空欄にする
document.order.order_text.value = "";
//送信ボタンを使用不可にする
document.getElementById("b_submit").disabled = true;
}
ユーザー関数内の最後に通信ボタンを使用不可にする命令を付け加えます。
ここでは、わざわざユーザー関数check_order2()を実行する必要はありません。全部の項目を調べなくても初期状態に戻すだけで良いのです。
送信ボタンがしよう可能になっているときに、ページを再読込しても送信ボタンが使用不可になりません。
フォームのリセットだけでは対応できないようです。
そこで強制的に送信ボタンを使用不可にします。
document.order.reset();
document.getElementById("b_submit").disabled = true;
スクリプトの初期設定後、リセットの次にプロパティ変更の命令を加えておきます。