formのバリデーション

メールフォームのバリデート

メールフォームのバリデーションをしたいので
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>

を忘れないように。表示がへんにんります