本文へジャンプ  

未入力チェックのサンプル

サンプル2 (未入力チェック)

フォームメール汎用CGIを不特定多数のユーザーが利用できるようにするため、個別に未入力のチェックを行うことができません。解決方法としては、HTMLファイルにJavaScriptを組み込んで未入力チェックを行うことです。

次のサンプルは JavaScript で、「氏名」と「E-mail」のみの未入力チェックを行います。

(このフォームはサンプルなので実際に送信できません。)

氏名: テキストボックス (※必ずご記入ください)

住所: テキストボックス

電話: テキストボックス

E-mail: テキストボックス (※必ずご記入ください)

確認ボタン 取り消しボタン


HTMLの記述方法

上記フォームは次の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>

■解説

  1. <script language="JavaScript"></script> までの部分は未入力チェックを行う Check という関数が書かれている部分です。この Check 関数は <form method="POST" action= .... > の中の onsubmit="return Check()" というところから呼び出されます。

    つまり、送信ボタンが押されたら、指定された入力データに対して (Check という関数で)未入力チェックを行い、その結果を返すという仕組みです。
  2. <form method="post" action= .... > の中の name="myform" の myform は Check 関数に参照されるフォームの識別名です。(どんな名前でも結構ですが、必ず付けてください)

    ここで指定された名前 (myform) は次のように参照されます。

    if(document.myform.Name.value==""){
    alert("名前を入力してください。");
    return false;
    }
  3. 未入力チェックを行いたい入力項目については、<input.... name="xxxxx".... > の中の xxxxx の部分は必ず英数字にしてください。また、アンダースコアを除いて、ハイフォン、スペース、その他の特殊記号を使用しないようにご注意ください。(入力チェックを行わない項目の設定は自由です。漢字名でも構いません)
  4. name="xxxxx" で宣言された名前は JavaScript に参照されます。

    例として、氏名という入力項目は次のように設定された場合、

    氏名: <input size="30" type="text" name="Name">

    name="Name" の Name は次のように参照されます。
    (大文字と小文字を区別しますのでご注意ください)

    if(document.myform.Name.value==""){
    alert("名前を入力してください。");
    return false;
    }

    ここでは、フォーム (myform) の中に「氏名」欄 (Name) の入力値がなければ、"名前を入力してください"というメッセージを表示されます。
 

ページ上部へ