jquery.validate.jsで独自Validationメソッドを追加する

2015.04.13

jquery.validate.jsで独自Validationメソッドを追加する

jquery.validate.jsで独自Validationメソッドを追加します。

追加するにはjQuery.validator.addMethodを使用します。

第1引数に独自Validationメソッド名を指定、

第2引数に独自Validation関数を指定、関数の第1引数は入力値、第2引数はチェックする要素を指定、

第3引数にエラー時のメッセージを指定（省略可能だが「Warning: No message defined for name」と表示される）します。

まず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を作成します。

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

<p>
<label for="password">パスワード</label>
<input name="password" id="password" type="password" />
</p>

<p>
<input type="submit" name="Submit" value="送信"/>
</p>
</form>
</div>
<script>
$("#testForm").validate({
  rules:{
    name:{
      required:true,
      CustomValidateUserID:true
    },
    password:{
      required:true
    }
  },
  messages:{
    name:{
      required:'名前を入力してください',
    },
    password:{
      required:'パスワードを入力してください'
    }
  }
});
jQuery.validator.addMethod(
  "CustomValidateUserID",
  function(val,elem){
    reg = new RegExp("^[0-9a-zA-Z]+$");
    return this.optional(elem) || reg.test(val);
  },
  "ユーザIDは0-9,a-z,A-Zを使用してください"
);
</script>
</body>

CustomValidateUserIDという名前の独自Validationを追加しています。

this.optionalはjquery.validate.jsの内部関数で、elemに値が入ってない場合trueとなり、エラーメッセージは表示されません。

elemに値が入っている場合、正規表現がfalseの場合エラーとなり、trueの場合、エラーメッセージは表示されません。

return部分の書き方はこのように書くと覚えておいて問題ないです。

DEMO

コメント

タイトルとURLをコピーしました