Validation
フォームの入力チェックに便利なjQueryのvalidationプラグインの紹介
自分が使っているvalidationがマイナーなせいかネットで探してもなかなか出てこないので自分的メモ。
サンプル
http://moeten.info/maidcafe/?&m=otoiawase
空白のままフォームを送信してみてください。
使い方
head 部分 <script language="javascript" type="text/javascript" src="jQuery.js"></script> <script language="javascript" type="text/javascript" src="validation.js"></script> <script type="text/javascript"> $(function() { $("#form").validate(); }); </script> body 部分 <form action="hogehoge.php" method="post" id="form"> 名前(必須): <input type="text" name="myname" class="required"> <input type="submit" value="送信"> </form>
class="required"と指定するだけでチェックしてくれるので便利。
classに指定できる項目。よく使うもの。
ちなみにclass="required url"等どして複数指定可能です。
required | 必須項目。ないとエラー |
number | 数値の入力可能 |
alphabet | アルファベットのみ入力可能 |
メールアドレスの適合性チェック | |
url | http://のみ受け付ける。ドメインまで指定しないとエラー |
細かいルールを追加する方法
同一かチェック(email_checkとemalのフォーム内容をチェック)
{ rules: { "email_check" : { equalTo : ".email" } } }
数値の制限
{ rules: { "num_people" : { range : [4, 100] } } }
上記をまとめて指定
{ rules: { "num_people" : { range : [4, 100] }, "email_check" : { equalTo : ".email" } } }
ルールを使用したときの使い方
$(function() { $("#form").validate( { rules: { "num_people" : { range : [4, 100] }, "email_check" : { equalTo : ".email" } } } ); });