メールフォームのバリデート
メールフォームのバリデーションをしたいので
jquery.validate.min.jsを使ってバリデーションしてみる
チェックボックスのバリデートが意外とぐぐることが多いので記します
index.html
<div id="contact">
<div id="contact_box">
<div id="contact_contents">
<h2><span>お問合せ</span></h2>
<p class="des4"></p>
<div class="contact_box">
<form method="post" action="" id="formId">
<h3>地域を選択してください</h3>
<div class="radio">
<input type="radio" name="area1" class="radio-input" id="radio-01" value="東京">
<label for="radio-01">東京</label>
<input type="radio" name="area1" class="radio-input" id="radio-02" value="その他" checked>
<label for="radio-02">その他</label>
<div id="area1_error"></div>
</div>
<h3>お客様情報</h3>
<div class="contact_box2">
<h4 class="arrow color3">企業名</h4>
<input type="text" class="text" name="company1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">氏名<span>[必須]</span></h4>
<input type="text" class="text" name="name1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">フリガナ</h4>
<input type="text" class="text" name="name2" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">メールアドレス<span>[必須]</span></h4>
<input type="text" class="text" name="mail1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">連絡先 TEL</h4>
<input type="text" class="text2" name="tel1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">連絡先 FAX</h4>
<input type="text" class="text2" name="fax1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">ご住所</h4>
<input type="text" class="text" name="address1" value="" />
</div>
<div class="contact_box2">
<h4 class="arrow color3">年齢</h4>
<input type="text" class="text3" name="age1" value="" /> 歳
</div>
<div class="contact_box2">
<h4 class="arrow color3">性別</h4>
<div class="radio2">
<input type="checkbox" name="gender1[]" class="radio-input" id="radio-03" value="男性">
<label for="radio-03">男性</label>
<input type="checkbox" name="gender1[]" class="radio-input" id="radio-04" value="女性">
<label for="radio-04">女性</label>
<input type="checkbox" name="gender1[]" class="radio-input" id="radio-05" value="その他">
<label for="radio-05">その他</label>
<div id="gender1_error"></div>
</div>
</div>
<div class="contact_box2">
<h4 class="arrow color3">部門</h4>
<div class="cp_ipselect2 cp_sl04">
<select name="hope" required>
<option value="指定なし" selected>指定なし</option>
<option value="資材">資材</option>
<option value="設備">設備</option>
<option value="輸出入関連">輸出入関連</option>
<option value="リクルート">リクルート</option>
</select>
</div>
</div>
<div class="contact_box2">
<h4 class="arrow color3">お問い合わせ内容<span>[必須]</span></h4>
<textarea name="remarks1" placeholder="具体的にご記入ください。" class="text4"></textarea>
</div>
<div class="contact_box3">
<p><input type="submit" class="sub" name="confirm" value="確認する"></p>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$("#formId").validate({
rules: {
name1 :{
required: true
},
mail1 :{
required: true,
email: true
},
"gender1[]": {
required: true
},
"area1": {
required: true
},
},
messages: {
name1 :{
required: "<br /><font size='2' color='#ff0000'>お名前を確認してください。</font>"
},
mail1 :{
required: "<br /><font size='2' color='#ff0000'>メールアドレスを確認してください。</font>",
email: "<br /><font size='2' color='#ff0000'>メールアドレスを確認してください。</font>"
},
"area1" :{
required: "<br /><font size='2' color='#ff0000'>地域を選択して下さい。</font>"
},
"gender1[]" :{
required: "<br /><font size='2' color='#ff0000'>性別を選択して下さい。</font>"
}
},
errorPlacement: function(error, element) {
if(element.attr("name")=="area1")
{
error.insertAfter("#area1_error");
}
else{
error.insertAfter(element);
}
},
errorPlacement: function(error, element) {
if(element.attr("name")=="gender1[]")
{
error.insertAfter("#gender1_error");
}
else{
error.insertAfter(element);
}
}
});
});
</script>
サンプル
https://blog.tama-tama.net/test/form/
チェックボックスのcheckは上記のように
"gender1[]" :{
required: "<br /><font size='2' color='#ff0000'>性別を選択して下さい。</font>"
}
},
//ここの部分
errorPlacement: function(error, element) {
if(element.attr("name")=="gender1[]")
{
error.insertAfter("#gender1_error");
}
else{
error.insertAfter(element);
}
}
エラーを表示させる場所の
<div id=”gender1_error”></div>
を忘れないように。表示がへんにんります
コメント