【応用編】メールフォーム
jQueryはjavascriptなので、ユーザーの端末上で実行される
プログラムであることが特徴です。
そのため、入力された値のチェックはユーザー端末で行い、
メール送信やデータベースへの登録はサーバー上で行うように、
役割を分けるのが効果的です。
メールフォームを設置するうえで代表となる以下のチェックを
jQueryで実装してみましょう。
- 入力必須項目チェック
- 数値入力チェック
- 簡単なメールアドレスチェック
- メールアドレス確認用との値一致チェック
- その他選択時の自由記入欄入力必須チェック
【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>