<form action="" method="post">
<table>
<tr>
<th>お名前<span>※</span></th>
<td><input type="text" name="name" size="80" class="required" /></td>
</tr>
<tr>
<th>電話番号<span>※</span></th>
<td><input type="text" name="tel" size="80" class="required valNumber" /></td>
</tr>
<tr>
<th>メールアドレス<span>※</span></th>
<td><input type="text" value="" size="80" name="valMail" class="required valMail"/></td>
</tr>
<tr>
<th>メールアドレス 確認<span>※</span></th>
<td><input type="text" value="" size="80" name="valMail_check" class="required valMail valMail_check"/></td>
</tr>
<tr>
<th>年齢<span>※</span></th>
<td>
<select name="age" class="required">
<option value="" selected>選択してください</option>
<option value="10～19歳">10～20歳</option>
<option value="20～29歳">20～29歳</option>
<option value="30～39歳">30～39歳</option>
<option value="40～49歳">40～49歳</option>
<option value="50～59歳">50～59歳</option>
<option value="60～69歳">60～69歳</option>
</select></td>
</tr>
<tr>
<th>性別<span>※</span></th>
<td>
<ul class="radiobtnRequired">
<li><input type="radio" value="男性" name="gender" id="man" class="required" /><label for="man">男性</label></li>
<li><input type="radio" value="女性" name="gender" id="woman" /><label for="woman">女性</label></li>
</ul></td>
</tr>
<tr>
<th>お問い合わせ内容<span>※</span></th>
<td>
<ul class="checkboxRequired">
<li><input type="checkbox" name="checkedQuestion" id="checkedQuestion" value="質問" /> <label for="checkedQuestion">質問</label></li>
<li><input type="checkbox" name="checkedOffer" id="checkedOffer" value="取材申込" /> <label for="checkedOffer">取材申込</label></li>
<li><input type="checkbox" name="checkedEtc" id="checkedEtc" value="その他" /> <label for="checkedEtc">その他</label></li>
</ul></td>
</tr>
<tr>
<th>メッセージ欄</th>
<td><textarea id="inquiry" name="inquiry"rows="10" cols="60"class="validate"></textarea></td>
</tr>
</table>
<p class="btn"><input type="submit" value="送信" /></p>
</form>
$(function(){
$("form").submit(function(){
//エラーの初期化
$("span.error").remove();
$(":text,textarea,select").each(function(){
//必須項目のチェック
$(this).filter(".required").each(function(){
if($(this).val()==""){
$(this).after("必須項目です")
}
})
//数値のチェック
$(this).filter(".valNumber").each(function(){
if(isNaN($(this).val())){
$(this).after("半角数字だけで入力してください")
}
})
//メールアドレスのチェック
$(this).filter(".valMail").each(function(){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).after("メールアドレスの形式が異なります")
}
})
//メールアドレス確認のチェック
$(this).filter(".valMail_check").each(function(){
if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
$(this).after("メールアドレスが異なります")
}
})
})
//ラジオボタンのチェック
$(".radiobtnRequired input").each(function(){
$(this).filter(".required").each(function(){
if($("input[name="+$(this).attr("name")+"]:checked").size() == 0){
$(".radiobtnRequired").after("選択してください")
}
})
})
//チェックボックスのチェック
$(".checkboxRequired").each(function(){
if($(":checkbox:checked",this).size()==0){
$(this).after("選択してください")
}
})
//エラーの際の処理
if($("span.error").size() > 0){
$('html,body').animate({ scrollTop: $("span.error:first").offset().top-40 }, 'slow');
return false;
}
})
//入力したらエラーメッセージを消す
$(".required").on('blur', function() {
$(".required").each(function(){
if(!$(this).val()==""){
$(this).next('span.error').remove();
$(.radiobtnRequired).next('span.error').remove();
$(.checkboxRequired).next('span.error').remove();
}
})
});
})
サンプル
参考にしたサイト
