【応用編】メールフォーム

jQueryはjavascriptなので、ユーザーの端末上で実行される
プログラムであることが特徴です。
そのため、入力された値のチェックはユーザー端末で行い、
メール送信やデータベースへの登録はサーバー上で行うように、
役割を分けるのが効果的です。
メールフォームを設置するうえで代表となる以下のチェックを
jQueryで実装してみましょう。

  1. 入力必須項目チェック
  2. 数値入力チェック
  3. 簡単なメールアドレスチェック
  4. メールアドレス確認用との値一致チェック
  5. その他選択時の自由記入欄入力必須チェック

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“form”).submit(function(){
 //エラー表示の初期化
 $(“p.error”).remove();
 $(“dl dd”).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(“.number”).each(function(){
   if(isNaN($(this).val())){
    $(this).parent().prepend(“<p class=’error’>
     数値のみ入力可能です</p>”);
   }
  });
 //メールアドレスのチェック
  $(this).filter(“.mail”).each(function(){
   if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
    $(this).parent().prepend(“<p class=’error’>メールアドレスの形式が異なります</p>”);
   }
  });
 //メールアドレス確認のチェック
  $(this).filter(“.mail_check”).each(function(){
    if($(this).val() && $(this).val()!=$(“input[name=”+$(this).attr(“name”)
    .replace(/^(.+)_check$/, “$1″)+”]”).val()){
    $(this).parent().prepend(“<p class=’error’>メールアドレスと内容が異なります</p>”);
   }
  });
 });
  
 //ラジオボタンのチェック
  $(“:radio”).filter(“.validate”).each(function(){
   $(this).filter(“.required”).each(function(){
    if($(“input[name=”+$(this).attr(“name”)+”]:checked”).size() == 0){
     $(this).parent().prepend(“<p class=’error’>選択してください</p>”);
    }
   });
  });
  
 //チェックボックスのチェック
  $(“.checkboxRequired”).each(function(){
   if($(“:checkbox:checked”,this).size() == 0){
    $(this).prepend(“<p class=’error’>選択してください</p>”);
   }
  });
  
 //その他項目のチェック
  $(“.validate.add_text”).filter(“.validate”).each(function(){
   if($(this).attr(“checked”) == true && $(“input[name=”+$(this).attr(“name”)
    .replace(/^(.+)$/,”$1_text”)+”]”).val()==””){
    $(this).parent().prepend(“<p class=’error’>その他の項目を入力してください</p>”);
   }
  });
  
 //エラーの場合の処理
  if($(“p.error”).size() > 0){
   $(‘html,body’).animate({ scrollTop: $(“p.error:first”)
    .offset().top-40},’slow’);
   $(“p.error”).parent().addClass(“error”);
   return false;
  }
 });
});
</script>

【HTML】
<h1>お問合せ</h1>
<form action=”complate.html” method=”post”>

<dl>
<dt>お名前<span>※</span></dt>
<dd>
<input name=”name” type=”text” size=”40″ class=”validate required” /></dd>

<dt>フリガナ</dt>
<dd><input name=”furi” type=”text” size=”40″ /></dd>

<dt>郵便番号</dt>
<dd><input name=”zip1″ type=”text” size=”3″ maxlength=”3″
class=”validate number”  /> – <input name=”zip2″ type=”text” size=”4″ maxlength=”4″ class=”validate number”  />
</dd>

<dt>メールアドレス</dt>
<dd><input name=”mail” type=”text” size=”80″ 
class=”validate mail”  /></dd>

<dt>メールアドレス(確認)</dt>
<dd><input name=”mail_check” type=”text” size=”80″ 
class=”validate mail_check”  /></dd>

<dt>性別<span>※</span></dt>
<dd>
<input type=”radio” value=”男性” name=”gender” id=”man” 
class=”validate required”  /><label for=”man”>男性</label>
<input type=”radio” value=”女性” name=”gender” id=”woman” /><label for=”woman”>女性</label>

</dd>

<dt>どこでこのサイトを知りましたか?<span>※</span></dt>
<dd class=”checkboxRequired” >
<input name=”serch” type=”checkbox” id=”serch” value=”検索エンジン” />
<label for=”serch”>検索エンジン</label>
<input name=”friend” type=”checkbox” id=”friend” value=”知人の紹介” />
<label for=”friend”>知人の紹介</label>
<input name=”mail_magazine” type=”checkbox”
id=”mail_magazine” value=”メールマガジン” /><label for=”mail_magazine”>メールマガジン</label>
<input name=”etc” type=”checkbox” id=”etc” value=”その他” 
class=”validate add_text”  /><label for=”etc”>その他</label>
<input name=”etc_text” type=”text” value=”” />

</dd>

<dt>お問合せ内容<span>※</span></dt>
<dd><textarea id=”inquiry” name=”inquiry” cols=”60″ rows=”10″ 
class=”validate required”  ></textarea>
</dd>

</dl>
<input type=”submit” value=”送信” />
</form>

メールフォームサンプル

This entry was written by admin , posted on 土曜日 6月 25 2011at 10:06 am , filed under 応用例 and tagged , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.