フォームのバリデーションをしてみる with jQuery Validation Engine

なにやらフォームを作ってます。$.postする前にバリデーションしたいです。 jQuery Validation Engineが良かったのでブログingします。(http://c-brains.jp/blog/wsg/09/08/28-200143.phpで言及されてますが、少し情報が古いので ^^ )

1. ダウンロードして展開

https://github.com/posabsolute/jQuery-Validation-Engineの右下あたりからzipをダウンロードしてきます。ドキュメントルート以下に展開

$ tree jQuery-Validation-Engine/
jQuery-Validation-Engine/
├── css
│   └── validationEngine.jquery.css
└── js
   ├── jquery.validationEngine-en.js
    ├── jquery.validationEngine-ja.js
    └── jquery.validationEngine.js

2. HTMLに組み込む

-ja.jsは日本語でメッセージを表示する用。英語の場合は-en.js。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/jQuery-Validation-Engine/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jQuery-Validation-Engine/js/jquery.validationEngine-ja.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="lib/jQuery-Validation-Engine/css/validationEngine.jquery.css" type="text/css"/>

3. フォームのclassに追加

class="validate[required]"のようにclassに追加するだけ！

4. formにvalidationを適用

 <script type="text/javascript">
    $(function(){
        $("#register").validationEngine();
    });
    </script>

これだけです！！