validationEngine.jsでJavascriptでバリデーション

なにこれ

jQueryを利用したクライアントサイドのバリデーションライブラリ

jQuery-Validation-Engine

使い方

最低限必要なファイルは

• jquery.validationEngine.js
• validationEngine.jquery.css

の２つ。ただしエラー文はデフォルトだと英語なので日本語化できるjquery.validationEngine-ja.jsがあるとベター

HTML

<form id="dummyform" name="dummyform" method="post" class="form-horizontal">
    <label>氏名　入力必須</label>
    <input id="name" name="name" class="form-control validate[required]"/>
    <button type="submit" class="btn btn-info">送信</button>
</form>

Javascript

$(document).ready(function(){
    $("#dummyform").validationEngine('attach', {
        onValidationComplete: function(form, status){
            if(status === true){
                alert("ok");
            }
        }
    });
});

これで全フォームが入力されている時のみ「ok」が表示される

ｋｗｓｋ

こいつは各フォームのclassを見ている　さっきみたいにvalidate[required]だと入力必須となる

URLを入力させたい

httpから始まる文字列のみ許容させる場合はvalidate[custom[url]]となる。「,」で区切れば入力必須＆URLを組み合わせる事ができる

<input id="url" name="url" class="form-control validate[required,custom[url]]"/>

URLの他にもある

• email：メールアドレス　ex.username@hostname.com
• date：日付　ex.YYYY-MM-DD
• number：数字　ex.-143.22　.77　+234,23
• integer：整数　ex. -635 +2201 738
• ipv4：IPアドレス　ex.127.0.0.1
• onlyNumberSp：半角数字のみ
• onlyLetterSp：半角アルファベットのみ
• onlyLetterNumber：半角英数のみ

いずれか入力必須にしたい

自宅電話番号または携帯電話番号のどちらか必須～ってしたい場合はgroupRequiredを使う。

<input id="phone1" name="phone1" class="form-control validate[groupRequired[phone]]">
<input id="phone2" name="phone2" class="form-control validate[groupRequired[phone]]">

パスワードを再入力させたい

equalsを使う

<input id="pass" name="pass" class="form-control validate[required]"/>
<input id="pass2" class="form-control validate[required,equals[pass]]"/>

ほか

公式Demoサイトから拾え

• demoValidators.html
• Demos