記事

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

なにこれ

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

jQuery-Validation-Engine

使い方

最低限必要なファイルは

の2つ。ただしエラー文はデフォルトだと英語なので日本語化できる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」が表示される

kwsk

こいつは各フォームの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
  • ipv4IPアドレス 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サイトから拾え