jquery.validationEngine.jsとautoConfirm.jsの併用

javascriptである程度凝ったバリデーションをしようとすると、やはり既存ライブラリを使ったほうが良いと考え、jquery.validationEngine.jsを導入してみました。

posabsolute/jQuery-Validation-Engine
https://github.com/posabsolute/jQuery-Validation-Engine

見た目もよく、IE6以降対応で、バリデーションの種類も柔軟に設定出来ることなどからこちらにしてみました。

あと、確認画面を出すためにautoConfirm.jsというjqueryプラグインを使っていました。

autoConfirm.js - フォームの確認画面を自動生成
http://blog.material-being.com/portfolio/auto_confirm/

これは確認画面をわざわざ作らなくても、入力フォームを使って確認画面を表示してくれるものです。

で、この２つを一般的な設定で併用して使おうとすると、どちらもsubmitイベントで同時に平行して動いてしまうためうまく動きませんでした。

バリデーションが通ったら確認画面を表示する、という動作にする必要がありました。
元々は、submitするためのボタンにonclickで自前のバリデーションを実行し、trueだったときにautoConfirm.jsに回るようになっていました。
そこでjquery.validationEngine.jsも同様に動かすようにしてみました。

公式ページの使い方や、validationEngineを紹介しているエントリーではだいたい

$(document).ready(function(){
    $("#formID").validationEngine();
});

と、フォームにvalidationEngineをattachしてsubmitで自動的にvalidateが掛かるように設定していますが、「validate」というメソッドを呼ぶことでvalidateを掛けることができます。

$("#formID").validationEngine('validate');

そこで下記のように確認ボタンが押されるとvalidationEngineのvalidateを呼んで、それが通った時だけautoConfirmで確認画面に遷移する、という動作に出来ました。

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

  <button type="submit" onclick="return validate(document.editForm)">確認</button>
  <button type="button" class="autoConfirmBack" style="display:none;">戻る</button>
</form>

<script type="text/javascript" src="/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="/js/autoConfirm.js"></script>
<script type="text/javascript">
 function validate(form) {
   if (! $(form).validationEngine('validate')) {
     return false;
   }
   return true;
 }
</script>