jquery.validate.jsでフォームを独自チェック

jquery.validate.jsでフォームを独自チェックすることができます。

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

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

body部にformを作成します。ラジオボタンが「はい」の場合のみテキストエリアが必須となるようなformにします。(依存関係があるようにします)

<body>
<!-- コーディング部分 -->
<div>
<form id="testForm" method="post"> <p>
<lable for="name" >名前</label>
<input name="name" type="text" />
</p>
 
<p>
<label for="radio1">備考を必須にしますか?</label>
<input name="radio1" id="radio1" type="radio" value="1" />はい
<input name="radio1" id="radio2" type="radio" value="2" checked/>いいえ
</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:{
        depends:function() {
          return $("#radio1").is(":checked");
        }
      }
    }
  },
  messages:{
    name:{
      required:'名前を入力してください',
      minlength:'名前は3文字以上入力してください'
  },
    biko:{
      required:'備考を入力してください'
    }
  }
});
</script>
</body>

最後にformのid属性にvalidate()メソッドを実行していますがこの部分で依存関係や必須項目などを指定します。

まずnameを必須、3文字以上入力するようにチェックしています。

bikoはradio1がチェックされた場合(戻り値がtrue)のみ必須となるようにチェックしています。

それぞれのチェックでエラーの場合messagesでエラーメッセージを独自のメッセージを表示するように指定しています。

これでクライアントサイドで独自のvalidateチェックが行えます。

DEMO

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA