validationEngine.jsはリアルタイムでフォームの入力項目のチェック(バリデーション)が比較的簡単に実装できる便利なプラグインです。
今回は送信ボタンの非活性化も含めメモしたいと思います。
プラグインをダウンロード
まずは以下からプラグインをダウンロードしましょう。
validationEngine GitHubページ（外部リンク）
設定する
cssとjsを<head>と</body>前にそれぞれ記述します。
<head> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css">
<script src=”js/jquery-1.12.4.min.js”></script>
<script src=”js/jquery.validationEngine-ja.js” charset=”utf-8″></script>
<script src=”js/jquery.validationEngine.js” charset=”utf-8″></script>
</body>
今回は日本語プラグインを使用するので「languages」フォルダに入っている「jquery.validationEngine-ja.js」を使用します。
validationEngineを呼び出す
それではvalidationEngineを呼び出してみましょう。jquery.validationEngine.jsの後に以下のスクリプトを記述します。
$(function(){
//formの未入力チェック
$("#formCheck").validationEngine(
'attach', {
promptPosition: "bottomLeft"
}
);
});
フォームの必須項目を設定する
フォームの必須項目のinputにclassとrequiredを記述します。
<tr> <th class="hissu"><p>お名前</p></th> <td> <div class="parts"> <input name="kname" type="text" value="" class="validate[required]" required> </div> </td> </tr>
これで必須エラーの吹き出しが表示されます。
吹き出しの位置を変える場合は、promptPositionを変更してください。
promptPosition: "topLeft"
validationEngine.jsのエラーの種類について
classに設定されているvalidate[required]はjquery.validationEngine-ja.jsに設定されているエラーの種類を指し、メッセージの内容や正規表現チェックなどのオプションが豊富に用意されています。また、カスタマイズも可能です。
エラーの一例
validate[minSize[文字数]] 文字数に設定した文字数以上を入力 validate[maxSize[文字数]] 文字数に設定した文字数以下を入力 validate[minCheckbox[数字]] 数字に設定した項目以上を選択 validate[maxCheckbox[数字]] 数字に設定した項目以下を選択 validate[custom[phone]] 電話番号の正規表現をチェック
また、カスタマイズも可能です。
例えば郵便番号をチェックする際には、以下のエラータイプを追加するだけでOKです。
"zip": {
"regex": /^\d{3}-\d{4}$/,
"alertText": "* 郵便番号が正しくありません"
}
<input type="text" value="" class="validate[custom[zip]]">
エラーの種類については様々なサイトでも紹介されていますので、是非ググってみてください。
正規表現をチェックする
上記で紹介した電話番号チェックのように正規表現のチェックもvalidationEngine.jsでは可能です。メールの正規表現をチェックする場合、以下のようにclassを設定します。
<input name="mail" type="text" value="" class="validate[required,custom[email]]" required>
これにより必須エラーの吹き出しが以下のように表示されます。
メッセージの内容を変更したい場合はalertTextを変更してください。
"alertText": "* メールアドレスが正しくないよ！"
特定の条件のときだけ入力をチェックする
複数選択肢があり「その他」を選択した場合のみチェック対象とするケースがよくあります。これをvalidationEngine.jsで処理しようとすると、中々難しい….。
それで一考したのはvalidationEngine.jsは表示されているフィールドに対してチェック機能が働くので、「その他」を選択した時だけ表示されるようにすれば、ということでスクリプトを追加しました。
js
//ページが表示されたタイミングで実施する。（ブラウザバックを含む）
window.onpageshow = function(){
jQuery("#form-Check").validationEngine();
appearTextIn();
//どれかがチェックされているかを確認
jQuery(".ch").on("click",function(){
appearTextIn();
});
}
//判定実施。
var appearTextIn = function(){
var obj = document.getElementById("know_4");
var isChecked = obj.checked;
if ( isChecked == true ){
//「その他」がチェックされていれば入力欄を表示
document.getElementById("know_other").style.display = "";
}else{
//上記以外なら表示しない
document.getElementById("know_other").style.display = "none";
}
}
html
<label><input id="know_1" type="checkbox" name="know[]" value="検索エンジン" class="ch validate[minCheckbox[2]]"/> 検索エンジン</label> <label><input id="know_2" type="checkbox" name="know[]" value="twitter" class="ch validate[minCheckbox[2]]"/> twitter</label></li> <label><input id="know_3" type="checkbox" name="know[]" value="知人からの紹介" class="ch validate[minCheckbox[2]]"/> 知人からの紹介</label> <label><input id="know_4" type="checkbox" name="know[]" value="その他" class="ch validate[minCheckbox[2]]"/> その他</label> <div id="know_other"> <p>その他を選択した方はご入力ください。</p> <input name="know_other" type="text" style="ime-mode:auto;" value="" class="validate[required]" style="display:none;"> </div>
これで何とか対応できました。
以下にデモを用意しました。
EFOの視点からも様々な応用ができそうなので、またメモしたいと思います。
