<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function str_check(obj) {
if (!obj.name.value) {
alert("お名前を記入してください。");
obj.name.focus();
}
else if (!obj.email.value) {
alert("メールアドレスを記入してください。");
obj.email.focus();
}
else if (!obj.email.value.match(/^[-\.\w]+\@[-\.\w]+\.[-\.\w]+$/)) {
alert("メールアドレスの形式が不正です。");
obj.email.focus();
}
else if (!obj.message.value) {
alert("メッセージを記入してください。");
obj.message.focus();
}
else {
obj.elements[obj.elements.length - 2].disabled = true;
obj.submit();
}
}
function init(obj) {
obj.elements[obj.elements.length - 2].disabled = false;
if (confirm("入力された内容を全てクリアしてもよろしいですか？")) obj.reset();
}
// -->
</script>
</head>
<body>
<form action="./mail.cgi" method="POST">
<table>
<tr>
<td>お名前:</td>
<td><input type="text" name="name" value="" size="40"></td>
</tr>
<tr>
<td>メールアドレス:</td>
<td><input type="text" name="email" value="" size="40" style="ime-mode: disabled;"></td>
</tr>
<tr>
<td valign="top">メッセージ:</td>
<td><textarea name="message" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="送信" onclick="str_check(this.form); return false;">
<input type="reset" value="取り消し" onclick="init(this.form); return false;"></td>
</tr>
</table>
</form>
</body>
</html>
主に掲示板やメール送信のフォームにおいて2重送信を防止するものです。
フォームの送信はスクリプト内から行いますので、イベントハンドラには false を返して本来の submit による送信動作を無効化しておきます。
引数 obj は 呼び出したフォーム自身 (this.form) を指します。よって、if (!obj.name.value) は、このフォームの name というエレメントの値が無いという意味です。name はフォームの「お名前」の部分を指します。
つまり、なにも入力されていなければアラート表示して入力フォームにフォーカスします。入力されていれば次の else if 文に進みます。もし任意入力の項目がある場合は、その項目のエレメント名がある else if 文の行を全て削除してください。
このようにそれぞれの項目を順にチェックして、全て入力されていれば obj.elements[obj.elements.length - 2].disabled = true; によって送信ボタンを無効化して obj.submit(); によってフォームの内容を送信します。
送信ボタンに name 属性を付けるとその値（この例では「送信」）も CGI 側に送信されてしまうため、それを防ぐためにあえて obj.elements[obj.elements.length - 2] としています。これは、このフォームの一番下から2番目のエレメントという意味です。disabled は、そのエレメントを無効化する属性なのでそれを有効 (true) にします。
リセットボタンを押した時にはフォームの内容のリセットを行ない、再度送信できるように関数 init を呼び出して disabled を無効 (false) にします。
フォームの送信動作をスクリプトが行うのではなく、submit を制御するには以下のようにします。（上記と下記のスクリプトは全く同じことです）
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function str_check(obj) {
if (!obj.name.value) {
alert("お名前を記入してください。");
obj.name.focus();
}
else if (!obj.email.value) {
alert("メールアドレスを記入してください。");
obj.email.focus();
}
else if (!obj.email.value.match(/^[-\.\w]+\@[-\.\w]+\.[-\.\w]+$/)) {
alert("メールアドレスの形式が不正です。");
obj.email.focus();
}
else if (!obj.message.value) {
alert("メッセージを記入してください。");
obj.message.focus();
}
else {
obj.elements[obj.elements.length - 2].disabled = true;
return true;
}
return false;
}
function init(obj) {
obj.elements[obj.elements.length - 2].disabled = false;
return confirm("入力された内容を全てクリアしてもよろしいですか？") ? true : false;
}
// -->
</script>
</head>
<body>
<form action="./mail.cgi" method="POST" onsubmit="return str_check(this);" onreset="return init(this);">
<table>
<tr>
<td>お名前:</td>
<td><input type="text" name="name" value="" size="40"></td>
</tr>
<tr>
<td>メールアドレス:</td>
<td><input type="text" name="email" value="" size="40" style="ime-mode: disabled;"></td>
</tr>
<tr>
<td valign="top">メッセージ:</td>
<td><textarea name="message" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="送信">
<input type="reset" value="取り消し"></td>
</tr>
</table>
</form>
</body>
</html>
これはフォームの内容のチェックをした結果の真偽を返した値によって送信を行います。送信ボタンの onclick を フォームの onsubmit に、リセットボタンの onclick を フォームの onreset にそれぞれイベント処理を変更します。
送信時にそれぞれの入力チェックを行い、未入力があればアラート後に false を返して送信動作を無効にします。全て入力されていれば送信ボタンを無効化して true を返しますので、フォームの送信動作が行われます。
フォームの入力値チェックは補助的なことであり、なおかつ JavaScript が無効状態では機能しませんので、送信される CGI 側でも必ずチェックをしたほうが良いと思います。（セキュリティ対策も兼ねて）