Edited at

jQuery の validationEngine でバリデーションする


概要

POST前にバリデーションを行い、バリデーションが成功した場合のみ、処理を続行したい。

バリデーションには、jQuery-Validation-Engine を用いた。


実装


ライブラリの準備、読み込み


前提:

jquery が読み込まれている前提。(CDNにしてみた)

<!-- jquery -->

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>


jQuery-Validation-Engine の読み込む

github より、以下のファイルをダウンロードし、読み込む。


  • jquery.validationEngine.js

  • jquery.validationEngine-ja.js

<!-- jquery validation engine -->

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


validationEngine の初期設定


サンプルの前提:

register という id の FORM が定義されている。

<FORM id="register">

<INPUT TYPE="text" NAME="title">
</FORM>


FORM とvalidationEngine を紐付け

register フォーム と validationEngine を紐づける。

(ついでに、プロンプトの場所も指定した。)

jQuery(document).ready(function(){

jQuery("#register").validationEngine({
promptPosition: "bottomLeft"
});
});


個々の項目にバリデーションルールを定義する

required(=必須)ルールを指定した。

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


参考:オプションをつけた例


  • エラー時のメッセージも定義

  • プロンプトの位置を指定

<input type="text" name="title" class="validate[required] text-input" data-errormessage-value-missing="名前を教えてください。" data-prompt-position="topLeft">


バリデーションの結果を取得する

var validateResult = $("#register").validationEngine('validate');

True / False が得られるので、これを用いて処理を分岐させた。


参考: