validateでフォーム入力チェック

簡単にフォームの入力チェックができるjquery.validate.jsプラグインです。

コードのダウンロードは下記サイトから。

bassistance.de » jQuery plugin: Validation

使うファイルは
・jquery.validate.min.js
・messages_ja.js
の2つ。


使い方

---

jQueryとダウンロードしたjquery.validateを組み込む
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="messages_ja.js"></script>

HTML部分はこんな風に <form id="form"> 名前： <input id="name" name="name" size="25" class="required" minlength="4"><br> ニックネーム： <input id="Nname" name="Nname" size="25" class="required" rangelength="5 10"><br> URL： <input type="text" id="url" name="url" size="25" class="url"><br> E-Mail： <input id="email" name="email" size="25" class="required email"><br> <input type="submit" class="submit" id="form-host-submit" value="登録"> </form>

必須項目にはclass="required"
URLとして入力させたいならclass="url"
E-Mailとし入力させたいならclass="email"
E-Mailで必須入力ならclass="required email"
という風に記述するだけです。

また、minlenght="4"で最小値設定
rangelength="5 10"で入力文字数設定など、細かい設定もできます。

で、スクリプト部分でIDを指定。 <script type="text/javascript"> $(document).ready(function(){ $("#form").validate(); }); </script>

簡単に入力チェックが出来て便利です。
サンプルはこんな感じ

おわり。