概要
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 が得られるので、これを用いて処理を分岐させた。