Validation

Formの入力チェックをしてくれるpluginです。

Load

本体と日本語ファイルを読み込んでいます。¹⁾

<script type="text/javascript" src="src/path/to/js/jquery.validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="src/path/to/js/jquery.validate/localization/messages_ja.js"></script>

フォーム

以下の様なフォームを作成します。

<form id="form-id">
  <label>名　　　　　前　</label><input type="text" name="name" placeholder="お名前"><br/>
  <label>メールアドレス　</label><input type="text" name="email" placeholder="メールアドレス"><br/>
</form>

<label>名　　　　　前　</label><input type="text" name="name" placeholder="お名前"><br/>
<label>メールアドレス　</label><input type="text" name="email" placeholder="メールアドレス"><br/>

</form>
</html>

ルール

ルール例

$(function(){
  $("#form-ID").validate({
    rules : {
      name : {
        required: true,
        minlength: 2
      }
      , email : {
        required: true,
        email: true
      }
    }
  });
})

これもロードします

<script type="text/javascript" src="src/path/to/js/jquery.validate/myrules.js"></script>

動作例

エラーがあると以下の様な感じで表示されます。

<html>
<form id=“form-id”>
<label>名　　　　　前　</label>
<input type=“text” placeholder=“お名前” name=“name”>
<label class=“error” for=“email”>このフィールドは必須です。</label>
<br>
<label>メールアドレス　</label>
<input type=“text” placeholder=“メールアドレス” name=“email”>
<label class=“error” for=“email”>このフィールドは必須です。</label>
<br>
</form>
</html>

デフォルトのバリデーションルール

ルール名	内容
required	必須入力チェックを行う
remote	バリデーション結果をサーバに問い合わせる
email	入力値がメールアドレスのフォーマットであるか
url	入力値がURLのフォーマットであるか
date	入力値が日付であるか
dateISO	入力値がISO形式の日付であるか
number	入力値が数字であるか
digits	入力値が数字のみであるか（整数のみ）
creditcard	入力値がクレジットカード番号のフォーマットであるか
equalTo	入力値が指定した値と一致しているか(確認のため二度入力する項目など)
maxlength	入力値が指定した桁数以下か
minlength	入力値が指定した桁数以上か
rengelength	入力値が指定した桁数の範囲であるか
renge	入力値が指定した数字の範囲であるか
max	入力値が指定した数字以下であるか
min	入力値が指定した数字以上であるか

条件付き

rules: {
  abc: {
    required: '#male:checked'
  }
}

rules: {
  abc: {
    required: '#male:!checked'
  }
}

rules: {
  "abc": {
    required: function() { return ($('#day').val() ==  '20' || $('#day').val() == '30'); }
  }
}

入力確認

rules: {
  password: {
     required: true,
     minlength: 5
  },
  confirm_password: {
     required: true,
     minlength: 5,
     equalTo: "#password"
  }
}

カスタムルール例

$(function() {
	// Alphabet
	jQuery.validator.addMethod("Alphabet", function(value, element) { 
		return this.optional(element) || /^[A-Za-z]*$/.test(value);
	}, "アルファベットを入力してください");
})

remote

Ajaxで別のファイルに接続して、返り値がfalse, undefined or nullの場合invalidとなる。

$(function(){
  $("#form-ID").validate({
    rules : {
      name : {
        required: true,
        minlength: 2
      }
      remote: {
        url: "path/to/url/namecheck.php",
        type: "get",
        data: {
          username: function() {
            return $('#name').val();
          }
        }
      }
    }
  });
})

このとき相手側はGETパラメータの['username']で値を受け取り、必要なチェックを行って'true'または'false'を返す。²⁾