jQuery-Validation-Engineの実装にハマったので備忘録として

フォームの入力チェック(バリデーション)はもはや標準仕様のようになっていますね。
jQueryを使うと簡単に実装できるのですが、このjQueryは便利なだけあって一つのサイトに複数のクエリを実装することが多くなります。
で、今回も入力バリデーションのjQuery-Validation-Engineというわけなのですが、、、
思いっきりハマりました。。

とりあえず手順を踏まえて説明します。

1.まず元のファイルをダウンロード

こちらから

いろいろファイルがありますが実際使うファイルは４つ。

/js/jquery-1.8.2.min.js (jQueryの本体)
/js/jquery.validationEngine.js (プラグインの本体)
/js/languages/jquery.validationEngine-ja.js (日本語ファイル)
/css/validationEngine.jquery.css (スタイルシート)

2.head内に　上記４ファイルのインクルードを記述。

<script src="js/jquery-1.8.2.min.js"></script><script src="js/jquery.validationEngine.js"></script><br /> <script src="js/jquery.validationEngine-ja.js"></script>

※jQueryの本体ファイルのバージョンは最新版でもOKです。

3.同じくhead内にアクションコードを記述

<script> $(function(){ jQuery("#form_1").validationEngine(); }); </script>

と、ここまではコピペ作業なので特に問題なし。

4.フォームタグ内に上記と同じIDを追加

<br /> <form id="form_1" action="">

5.バリデーションかけたい項目に以下のclassを追加

<input type="text" name="" class="validate[required]">

このrequiredは必須という意味のオプションです。
以下のように３つのオプションがあります。
[required]：必須入力項目
[custom[形式]]：形式チェック
[required,custom[形式]]：形式チェック+必須入力項目

さらに細かく設定できるんですがここでは省略します。
時間のあるときにまとめを作りますね。
今すぐ形式などを知りたい方は本家サイトを参照してください。

さて、とにかくとても簡単な設定です。
ハマる要素などないのですが。。。

実際に設定しても動きません。
で、数時間格闘した結果ようやく動作確認できました。
原因は以下の２つ。

1.jQuery.min.jsが重複していた!
bootstrapで組んでいたのでjQueryがページ下部にも設置されていました。。

2.アクションコードはjQueryがかぶる場合、短縮系だとダメらしい。
以下の通りに書き換え。

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#form_1").validationEngine('attach', { promptPosition:"inline" }); }); </script>

(‘attach’, {promptPosition:”inline” })の部分は少しカスタマイズしています。

とりあえずこれでようやく解決。
最後に、
jQueryのベースファイルは最初に読み込ませるのもポイント。
これはすべてのjQueryにいえることです。
今回はドリームウィーバー君によって勝手に貼られていたため気がつかなかったというオチでした。。

おまけ。メールやパスワードの再確認判定コード

あと、メールを再入力し最初と違う場合のエラー判定コードも書き留めておきます。

メール入力

<input type="email" class="validate[required]" id="mail1">

メール確認用

<input type="email" class="validate[required,equals[mail1]" id="mail2">

確認用のclassに一つ目のメールinputのIDを設定すればOK。

今回製作したサイトはこちら
動画の撮影編集をクラウドするじもピぃLab