フォームのバリテーションをjQueryプラグイン「ValidationEngine」

jQueryのプラグインで、バリテーション時に便利なプラグインを見つけました。

使い方は、公式サイトValidationEngineに記載されています。

特に、今回は、パスワードの確認フォームの値の一致時に、バリテーションを使うことにしましたが、設定次第では、かなり細かく設定がかのうなので、さまざまな場面で使えそうなプラグインです。特に、ajaxの設定もできるので、データベースからのデータとフォーム入力値の判定なども今後取り入れていきたいところです。今回は、単純な機能のみの説明で、次回以降に、ajaxの利用例なども紹介していきたいところです。

プラグインのダウンロードはGitHubより、入手してください。
https://github.com/posabsolute/jQuery-Validation-Engine

使い方としては、まずは、jQueryのプラグインなので、本体であるjQueryが読み込まれていることが必要です。
その次に、プラグインのjsとcssファイルを読み込みます。

ダウンロードしたフォルダの中から利用するファイルは下記になります。、任意の場所に設置してください。

<!-- For Example -->
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

次に、利用したいページで利用できるようにインスタンス化する。利用するフォームの指定。

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#form").validationEngine('attach');
});
</script>

次に、フォームに反映させる。
利用するformタグの中に、上記のjavascriptの中で指定した、idを入れる。

<h1>パスワード設定</h1>

<form id="form" action="test" method="post">

<p>パスワード：<input class="validate[required,custom[onlyLetterNumber],minSize[5],maxSize[30]] text-input" type="password" id="passwd" name="pass1" /></p>
<p>確認用：<input class="validate[required,custom[onlyLetterNumber],minSize[5],maxSize[30],equals[passwd]] text-input" type="password" id="re_passwd" name="pass2" /></p>

<input type="submit" value="確認する">
 
</form>

オプションはclassのValidateを編集することにより、設定できるようで、上記の例では、required (必須項目), custom[onlyLetterNumber](半角英数字),minSize[5](下限の指定),maxSize[30](上限の指定)となっています。

また、バリテーターは、上記で例を挙げたrequired、costom[]など以外にも、function[],ajax[],equals[],future[]など用途に応じて、さまざまな設定ができます。こちらの説明は、公式サイトを観覧ください。

個人的には主によく使いそうなものは、coutom[]のオプション設定です。オプションとして指定できるものには、下記のようなものがあります。