====== Validation ======
Formの入力チェックをしてくれるpluginです。
===== Load =====
本体と日本語ファイルを読み込んでいます。((jqueryも必要です))
===== フォーム =====
以下の様なフォームを作成します。
===== ルール =====
ルール例
$(function(){
$("#form-ID").validate({
rules : {
name : {
required: true,
minlength: 2
}
, email : {
required: true,
email: true
}
}
});
})
これもロードします
===== 動作例 =====
エラーがあると以下の様な感じで表示されます。
===== デフォルトのバリデーションルール =====
^ルール名^内容^
|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'を返す。((複数のデータが必要な場合は、data:の中身を複数書けばOK))
===== 参考 =====
[[http://docs.jquery.com/Plugins/Validation|Plugins/Validation]]
[[http://bassistance.de/jquery-plugins/jquery-plugin-validation/|jQuery plugin: Validation]]
[[http://d.hatena.ne.jp/kudakurage/20091211/1260521031|jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携]]
[[http://d.hatena.ne.jp/sugyan/20090312/1236815025|高機能ライブラリ「jQuery」とそのPlugin「Validation」]]
[[http://micelle.org/trash/jquery-validation-plugin|jQuery Validation Pluginメモ]]
[[http://www.goodpic.com/mt/archives2/2008/06/jqueryjqueryval.html|jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化]]((2011/09/16現在 Ver.1.8.1には日本語ファイルが同梱されている))
[[http://www.htmlhifive.com/conts/web/view/library/jquery-validate|hifive]]
[[http://jquery-master.net/plugin/jquery_validate_js/|jquery.validate.jsのvalidateメソッドで使えるオプション部分の超訳]]