javascriptを使ってお問い合わせフォームを作る～その１～

今回は以下のように遷移するお問い合わせフォームを作成してみようと思います。
1. 確認ボタンを押したら、フォームに入力されている値のチェックを行う
2. 値のチェックが全てOKであればポップアップで確認画面を表示する
3. 送信ボタンを押したらメールを送信する
4. 送信完了したら送信完了の旨をポップアップ画面に表示し、OKボタンを押したらポップアップ画面を閉じる

#ポップアップはブロックされる可能性がありますが気にしない。。。。
#気が向いたときにポップアップを使わずhtmlで確認画面を作成する方法を書きたいと思います。

その1ではフォームに入力された値のチェックを行い、エラーとして問い合わせフォームに表示する部分を説明します。

html

<h2>お問い合わせフォーム</h2>
<form class="form1" action="confirm.php" method="post" name="form1">
  <table class="mailform">
    <tbody>
      <tr>
        <th>法人名</th>
          <td><input class="validate required" type="text" name="company_name" value="" /></td>
      </tr>
      <tr>
        <th>法人名(ふりがな)</th>
        <td><input class="validate required kana" type="text" name="company_name_kana" value="" /></td>
      </tr>
      <tr>
        <th>ご担当者名</th>
        <td><input class="validate required" type="text" name="name" value="" /></td>
        </tr>
      <tr>
        <th>ご担当者名(ふりがな)</th>
        <td><input class="validate required kana" type="text" name="name_kana" value="" /></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input class="validate required mail" type="text" name="mail" value="" /></td>
      </tr>
      <tr>
        <th>ご依頼内容</th>
        <td><textarea class="validate required" name="body" rows="6"></textarea></td>
      </tr>
    </tbody>
  </table>
  <div style="text-align: center; margin-top: 15px;"><input type="submit" name="confirm" value="確認" /></div>
</form>

ちょい説明

値のチェックが必要な要素にvalidateクラスをつけています。基本validate+＠(チェックしたい内容を示すクラス)になります。
値の入力が必須の要素にはrequiredクラスをつけています。
値がふりがなかのチェックが必要な要素にkanaクラスをつけています。
値がメールかのチェックが必要な要素にmailクラスをつけています。
文字数やメールアドレスの確認用で2つ作って一致しているかのチェックを行う場合も同様に
それ用のクラスを作成し、javascriptで処理します。

javascript

$("form.form1").submit(function() {
  //エラーの初期化
  $("p.error").remove();
  $("table tr td").removeClass("error");
  $(":text,textarea").filter(".validate").each(function(){
  //必須項目のチェック
  $(this).filter(".required").each(function(){
  if($(this).val() =="") {
    $(this).parent().prepend("
    <p class="error">必須項目です</p>
  ");
 }
});

//ひらがなのチェック
$(this).filter(".kana").each(function(){
  if($(this).val() && !$(this).val().match(/^[ぁ-ん,ー]+$/)) {
    $(this).parent().prepend("
    <p class="error">ひらがなで入力してください</p>
    ");
  }
});

//メール正規表現チェック
$(this).filter(".mail").each(function(){
  if($(this).val() && !$(this).val().match(/^[0-9,A-Z,a-z][0-9,a-z,A-Z,_,\.,-]+@[0-9,A-Z,a-z][0-9,a-z,A-Z,_,\.,-]+\.(af|al|dz|as|ad|ao|ai|aq|ag|ar|am|aw|ac|au|at|az|bh|bd|bb|by|bj|bm|bt|bo|ba|bw|br|io|bn|bg|bf|bi|kh|cm|ca|cv|cf|td|gg|je|cl|cn|cx|cc|co|km|cg|cd|ck|cr|ci|hr|cu|cy|cz|dk|dj|dm|do|tp|ec|eg|sv|gq|er|ee|et|fk|fo|fj|fi|fr|gf|pf|tf|fx|ga|gm|ge|de|gh|gi|gd|gp|gu|gt|gn|gw|gy|ht|hm|hn|hk|hu|is|in|id|ir|iq|ie|im|il|it|jm|jo|kz|ke|ki|kp|kr|kw|kg|la|lv|lb|ls|lr|ly|li|lt|lu|mo|mk|mg|mw|my|mv|ml|mt|mh|mq|mr|mu|yt|mx|fm|md|mc|mn|ms|ma|mz|mm|na|nr|np|nl|an|nc|nz|ni|ne|ng|nu|nf|mp|no|om|pk|pw|pa|pg|py|pe|ph|pn|pl|pt|pr|qa|re|ro|ru|rw|kn|lc|vc|ws|sm|st|sa|sn|sc|sl|sg|sk|si|sb|so|za|gs|es|lk|sh|pm|sd|sr|sj|sz|se|ch|sy|tw|tj|tz|th|bs|ky|tg|tk|to|tt|tn|tr|tm|tc|tv|ug|ua|ae|uk|us|um|uy|uz|vu|va|ve|vn|vg|vi|wf|eh|ye|yu|zm|zw|com|net|org|gov|edu|int|mil|biz|info|name|pro|jp)$/i)){
    $(this).parent().prepend("
    <p class="error">メールアドレスの形式が異なります</p>
    ");
    }
  });
});

//エラーがあった場合の処理
if($("p.error").size() > 0) {
  return false; //submit処理の中断
}

ちょい説明

まず、form1の送信ボタンのアクションをバインドします。
次にinput typeがtext,textareaでclassにvalidateがついている要素を探します。
必須項目のチェックは値が空であるかをチェックし、ひらがなとメールのチェックは正規表現にマッチするかのチェックをしています。
#正規表現については気が向いたときに書きます。
チェックがNGであれば、input要素の親要素の最初の要素にpタグを追加しています。
先に記述したhtmlであればinputの上に追加されます。
エラーがあった場合はsubmit処理を中断し、フォームにエラー表記をするようにしています。