【JavaScript】【jquery】jquery.validate.jsの基本的な使い方
フォームへの入力チェック(バリデーション)を行ってくれる、jQueryプラグインの【jquery.validate.js】を利用したのでまとめておきます。
今回フォームはこんな感じです。
date_select.html
<html> <head> <title>validate</title> <meta charset="utf-8"> </head> <body> <h2>validate</h2> <form class="form-signin"> <table class="usertable"> <tr> <th>名前</th> <td><input name="myname" type="text" value="" /></td> </tr> <tr> <th>電話番号</th> <td><input name="num" type="text" value="" /></td> </tr> <tr> <th>メアド</th> <td><input name="address"type="text" value="" /></td> </tr> <tr> <th>性別</th> <td> <input name="gender" type="radio" value="男性" /> 男姓 <input name="gender" type="radio" value="女性" /> 女姓 </td> </tr> </table> <button id="button" class="btn btn-large btn-primary" type="submit">登録</button> </form> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/val.js"></script> </body> </html>
jquery.validate.jsはこちらのリンクからダウンロードしてください。
jQuery Validation Plugin | Form validation with jQuery
ダウンロードしたzipファイルを解凍したら、jquery.validate.min.jsを自分のjsファイルにつっこんで準備完了です。(jquery.jsも一緒に設定してください)
jquery.validate.jsでは、inputのname属性ごとにエラーメッセージ、エラーチェックのルールを定義できます。また、デフォで用意されているルール以外にも自分で独自のバリデートルールを定義することも可能です。
とりあえずJavaScriptのコードはこんな感じになりました。
val.js
(function(){ //標準エラーメッセージの変更 $.extend($.validator.messages, { email: '*正しいメールアドレスの形式で入力して下さい', required: '*入力必須です', phone: "*正しい電話番号の形式で入力してください" }); //追加ルールの定義 var methods = { phone: function(value, element){ return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value); } }; //メソッドの追加 $.each(methods, function(key) { $.validator.addMethod(key, this); }); //入力項目の検証ルール定義 var rules = { myname: {required: true}, num: "phone", address: {required: true, email: true}, gender: {required: true} }; //入力項目ごとのエラーメッセージ定義 var messages = { myname: { required: "*名前を入力してください" }, address: { required: "*メアドを入力してください" }, gender: { required: "*性別を選択してください" } }; $(function(){ $('#testform').validate({ rules: rules, messages: messages, //エラーメッセージ出力箇所調整 errorPlacement: function(error, element){ if (element.is(':radio')) { error.appendTo(element.parent()); }else { error.insertAfter(element); } } }); }); })();
1ブロックずつ解説していきますね。
まず1ブロック目では、標準で定義されているエラーメッセージを変更してあげています。もちろん変更なしでもvalidate自体は問題なく機能します。
//標準エラーメッセージの変更 $.extend($.validator.messages, { email: '*正しいメールアドレスの形式で入力して下さい', required: '*入力必須です', phone: "*正しい電話番号の形式で入力してください" });
バリデートルール : "表示させたいエラーメッセージ"
って感じで好きにつけてあげてください。
続いて2ブロック目では追加ルールを定義しています。
var methods = { phone: function(value, element){ return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value); } };
今回は'phone'というルールを新たに定義してあげました。正規表現で表してやればよいみたいです。この'phone'は11桁の数字または000-0000-000のように3桁-4桁-3桁とハイフンで数字が繋げられているものならエラーを出さないというルールです。
そして3ブロック目のaddMethod()で定義した追加ルールを登録しています。
4ブロック目と5ブロック目ではそれぞれ、適応する検証ルールとエラーメッセージをinputのname属性ごとに設定しています。
//入力項目の検証ルール定義 var rules = { myname: {required: true}, num: "phone", address: {required: true, email: true}, gender: {required: true} }; //入力項目ごとのエラーメッセージ定義 var messages = { myname: { required: "*名前を入力してください" }, address: { required: "*メアドを入力してください" }, gender: { required: "*性別を選択してください" }[f:id:matsumura-kobetsu:20150611175118p:plain] };
ルール定義では基本的に、name : {rule: true} という感じでokです。
たとえば myname: {required: true} は、name="myname"であるinputに対してrequired(入力必須)ルールの適用を行う、という具合です。
"phone"というのは先ほど定義した検証ルールですね。
エラーメッセージ定義では、name : {rule: "エラーメッセージ"} という感じです。
これで設定が終わりましたので、最後にフォームに対して(idで指定しています)先ほど設定してあげたrulesとmessagesを適用してバリデートを実行しています。
$(function(){ $('#testform').validate({ rules: rules, messages: messages }); });
実際にバリデイトを行うとこんな感じで怒ってくれます。すみません。
何が素晴らしいって、入力するたびにエラーチェックを行ってくれるのと、submitしようとした際もエラーチェックを行ってくれるところですね。便利。
ちなみにerrorPlacementってのは、エラーメッセージを表示する箇所を設定してあげてます。
以上で簡単なjquery.validate.jsの使い方は終了です。
もうちょい書きたいことがあったりなかったりするのでまた続編を書くかもしれません。書かないかもしれません。
この記事がどなたかのお役に立てれば幸せです。
