概要

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 の初期設定

サンプルの前提：

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

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