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

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

参考：

• jQuery-Validation-Engine
• jQuery-Validation-Engineで簡単にフォーム内容をチェック！
• jQuery Validation Engineを利用する