jquery.validate.jsでvalidateチェックタイミングを指定する

jquery.validate.jsでvalidateチェックタイミングを指定する
1. 関連

jquery.validate.jsでvalidateチェックタイミングを指定する

jquery.validate.jsはsubmitのタイミングでチェックされますが、formに対してvalid()メソッドを実行することでボタンクリックイベントやチェンジイベントなどのタイミングでバリデートチェックを行うことができます。

まずjqueryとjquery.validate.jsをプリロードします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>

年齢が20以上の場合、備考を必須にしています。

<body>
<!-- コーディング部分 -->
<div>
<form id="testForm" method="post">
<p>
<lable for="name" >名前</label>
<input name="name" type="text" />
</p>

<p>
<label for="age">年齢</label>
<input name="age" id="age" type="number" />
</p>

<p>
<lable for="biko">備考</label>
<input name="biko" type="textarea" />
</p>
<p>
<input type="submit" name="Submit" value="送信"/>
</p>
</form>
</div>
<script>
$("#testForm").validate({
  rules:{
    name:{
      required:true,
      minlength:3
    },
    biko:{
      required:function() {
        return $("#age").val() >= 20;
      }
    }
  },
  messages:{
    name:{
      required:'名前を入力してください',
      minlength:'名前は3文字以上入力してください'
    },
    biko:{
      required:'備考を入力してください'
    }
  }
});

$("#age").blur(function(){
  $("#testForm").valid();
});
</script>
</body>

validateメソッドの後にvalid()を実行しなくてはいけません。

上記ではid=ageのフォーム部品からカーソルアウトしたタイミングで備考欄の必須チェックを行っています。

備考欄が未入力の場合エラーメッセージが表示され、備考欄が入力済みの場合、エラーにはなりません。

また、valid()はformに対して実行する必要があります。（上記では$(“#testForm”)に対して。）

DEMO