メールフォームのバリデート
メールフォームのバリデーションをしたいので
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>
を忘れないように。表示がへんにんります