サンプル2 (未入力チェック)
フォームメール汎用CGIを不特定多数のユーザーが利用できるようにするため、個別に未入力のチェックを行うことができません。解決方法としては、HTMLファイルにJavaScriptを組み込んで未入力チェックを行うことです。
次のサンプルは JavaScript で、「氏名」と「E-mail」のみの未入力チェックを行います。
(このフォームはサンプルなので実際に送信できません。)
氏名: (※必ずご記入ください)
住所:
電話:
E-mail: (※必ずご記入ください)
上記フォームは次のJavaScriptとHTML記述から構成されています。
<html>
<head>
<title>Sample</title>
<script language="JavaScript">
<!--
function Check(){
if(document.myform.Name.value==""){
alert("名前を入力してください。");
return false;
}
if(document.myform.email.value==""){
alert("メールアドレスを入力してください。");
return false;
}
return true;
}
// -->
</script>
</head>
<body>
<h2> 未入力チェック(サンプル)</h2>
<form method="post" action="フォームメールのURL" name="myform" onsubmit="return Check()"><br>
氏名: <input size="30" type="text" name="Name"><br><br>
住所: <input size="40" type="text" name="住所"><br><br>
電話: <input size="30" type="text" name="電話"><br><br>
E-mail: <input size="30" type="text" name="email"><br><br>
<input type="submit" value="確 認"> <input type="reset" value="取り消し">
<input type="hidden" name="subject" value="タイトル">
</form>
</body>
</html>
■解説
- <script language="JavaScript"> ~ </script> までの部分は未入力チェックを行う Check という関数が書かれている部分です。この Check 関数は <form method="POST" action= .... > の中の onsubmit="return Check()" というところから呼び出されます。
つまり、送信ボタンが押されたら、指定された入力データに対して (Check という関数で)未入力チェックを行い、その結果を返すという仕組みです。- <form method="post" action= .... > の中の name="myform" の myform は Check 関数に参照されるフォームの識別名です。(どんな名前でも結構ですが、必ず付けてください)
ここで指定された名前 (myform) は次のように参照されます。
if(document.myform.Name.value==""){
alert("名前を入力してください。");
return false;
}- 未入力チェックを行いたい入力項目については、<input.... name="xxxxx".... > の中の xxxxx の部分は必ず英数字にしてください。また、アンダースコアを除いて、ハイフォン、スペース、その他の特殊記号を使用しないようにご注意ください。(入力チェックを行わない項目の設定は自由です。漢字名でも構いません)
- name="xxxxx" で宣言された名前は JavaScript に参照されます。
例として、氏名という入力項目は次のように設定された場合、
氏名: <input size="30" type="text" name="Name">
name="Name" の Name は次のように参照されます。
(大文字と小文字を区別しますのでご注意ください)
if(document.myform.Name.value==""){
alert("名前を入力してください。");
return false;
}
ここでは、フォーム (myform) の中に「氏名」欄 (Name) の入力値がなければ、"名前を入力してください"というメッセージを表示されます。