どんなフォームにも使えるjQueryのフォームバリデーション exValidation

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。

ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。

トピックス

ダウンロード

バリデーションエンジン
exValidation.js
バリデーションルール
exChecker-ja.js
サンプルファイル
exValidation.zip

使い方

1. JS・CSSファイルを読み込む

exValidaitonに必要なファイルは「exvalidation.css」「jQuery」「exvalidation.js」「exchecker-ja.js」の4つです。

「exchecker-ja.js」は基本的なバリデーションルールを記述したファイルなので、これを読み込むことで以下に記述する最低限のバリデーションを行うことができます。

2. 基本バリデーションルール

exchecker-ja.jsに基本のバリデーションルールを記述しています。下記のclassをフォーム要素（グループの場合はspanなどの要素）に割り振るか実行時にrulesというプロパティで指定すること（実行時のプロパティでバリデーションルールを指定する）でルールを決めることができます。

  • chkrequired – 必須項目
  • chkselect – select要素用の必須項目
  • chkradio – radioボタン（いずれかひとつ、グループ分けの親要素必須
  • chkcheckbox – checkbox（いずれかひとつ、グループ分けの親要素必須
  • chkgroup – 複数の項目をまとめる場合（詳しくは後述
  • chkretype-対象にするID – 再入力チェック
  • chkemail – メールアドレスチェック（*@*.*）
  • chkhankaku – 全角禁止
  • chkzenkaku – 全角のみ
  • chkhiragana – ひらがなのみ
  • chkkatakana – カタカナのみ
  • chkfurigana – ふりがな（ひらがな、数字、アルファベット、〜、ー、()）
  • chktel – 電話番号(形式チェックはなし)
  • chknumonly – 数字のみ
  • chknocaps – 英数字（小文字）のみ
  • chkzip – 郵便番号(形式チェックはなし)
  • chkurl – URL（http(s)://）
  • chkminX – X文字以下
  • chkmaxX – X文字以上
  • chkfile – type=”file”のチェック、chkrequiredは不要

また、適用させる項目はchkrequiredとchkhankakuは他の項目と同時に含めることが出来ます。例えば下記のようにクラスにchkemail, chkhankaku, chkrequiredを指定した場合は

必須項目・メールアドレスチェック・全角禁止になります。またクラスに記述する順序は任意で構いません。ところでバリデーションを行うinput要素には固有のidが必須になります。

特殊なタイプのチェック形式は以下のようになります。カッコ内はあってもなくても可

メールアドレス：*@*.*
電話番号：*(-)*(-)*
郵便番号：***(-)****

3. checkbox、radio、複数項目のバリデーション

checkbox、radio、複数項目をチェックする場合は
spanなどのインライン要素(*1)でグループを明示した上でここではspan要素としますが span要素にid、classを割り当てます。

例えば、メールアドレスを@前と後で分ける場合は


@

といったように分けるのが一般的なのでこれをチェックする場合は以下のようになります。


@

ポイントは上にも記述していますが、複数のinput要素をまとめるspanを用意してそのspan要素にid、classを割り当てます。

classはgroupが必須になり、あとはinput単体で指定するものが使えます。なので今回の場合はclassには chkgroup, chkrequired, chkhankaku, chkemail が入ることになります。

以下はradioボタンの例です。



    
  
    • 
  
    • 


            
radio、checkboxは例外になり、必須項目としてしかチェック出来ないのでclassにchkrequiredは必要ありません。

            
上記の例ではグループ化がspan要素ではなくul要素になっていますがCSSでinline指定(*1)すれば大丈夫です。要はdisplayプロパティがinline(inline-blockでも可)であればなんでも大丈夫です。

            
*1) 幅を持たせたブロック要素でも可ブロック要素は幅初期値が親に対して100%になるので エラーチップが画面から見切れることがあります。

            
4. select要素を対象にする場合

            
select要素を対象にする場合は

            

            
のようにvalueが空のoption要素を含めます。value属性を指定しないとvalidationは行われません。初期値には必ず空のvalue属性を指定してください。(初期値にはselected属性を指定することが推奨されています)

            select要素は選択されているoptionが変わった場合にvalidationが行われます。

            
5. 再入力をチェックする場合

            
メールアドレスやパスワードなど再入力を促す項目がある場合、それもvalidationの対象にすることができます。たとえば、

            

            
の後に

            

            
といった再入力項目があるとします。この項目は先のメールアドレス入力項目 input#mail と同じものを入力してもらうので

            

            
のようにクラスに chkretype-対象にする項目のID を含めます。今回は対象にする項目(メールアドレス入力項目)のIDはmailとなっているので chkretype-mail としています。

            
再入力チェックは複数項目の場合も有効で、単純に3と組み合わせるだけです。

            

@


            
の再入力項目は

            

@


            
となります。

            
6. 入力文字数をチェックする場合

            
パスワードなどの項目に入力文字数の制限をかけたいときは

            

            
のようにclassに

            
    
              
  • minX
    • 
              
  • maxX (Xはともに任意の数字)
    • 
            

            
を含ませます。もちろんmin・maxどちらか一方だけを指定でき、また他のすべてのチェックと併用することができます。

            ただし複数項目のメールアドレスは 文字列に@を含めるので1文字多く数えられます。(メールアドレスに入力文字数制限を使うことはないと思うのでそのままにしてます。)

            
7. チェックボックスで対象inputの必須をトグルする

            
以下該当部分の抜粋コードです。ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください。

            
  Favorite*

  
    
      
      
      
      
      
      
    
  


  Favorite Other
  
    
  


            
で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように

            
    
              
  • hoge: トグルを発火させるためのチェックボックスのID
    • 
              
  • fuga: チェックボックスの状態によって必須をトグルさせるinputのID
    • 
            

            
この後説明しているアクティベート時にトグルを行うためのルールを入れておきます。これだけです。

            
$("form")
  .exValidation({
    rules: {
      fav: "chkgroup chktoggle_f6_favOther", // chktoggle_f6_favOther の部分
      favOther: "chkrequired"
    },
    stepValidation: true
  });

            
8. アクティベート

            
最後に任意のJSファイルで以下のように実行します。

            
$(function(){
  $("form").validation();
});

            
9. アクティベート（ここでルールを指定する場合）

            
input要素に直接ルール（class）を指定しなくても、実行時に指定することができます。この方法のほうがHTMLを極力汚さないのでおすすめです。（ちょっとだけ処理遅いですが）

            
$("form")
  .exValidation({
    rules: {
      name: "chkrequired",
      kana: "chkrequired chkkatakana",
      email: "chkrequired chkemail chkhankaku chkgroup",
      pass: "chkrequired chkmin6 chkmax12",
      repass: "chkrequired chkretype-pass",
      radio: "chkradio",
      checkbox: "chkcheckbox"
    }
  });

            
上記のように、rulesというオプションで指定します。値はそれぞれ [id: rules] となります。

            
オプション

            
exValidationは汎用性を持たせるために色々なオプションがあります。

            

              

                オプション項目
                値
              

              

                rules
                classではなく、実行時に指定する場合 rules: { id, rules, … }
              

              

                errInsertPos
                エラーの挿入位置。デフォルトはbody直下、他に対象要素の前(before)と後ろ(after)
              

              

                err
                エラー時に実行するカスタム処理 function(target, id, message) {}
              

              

                ok
                処理が通ったときに実行するカスタム処理 funtion(target, id) {}
              

              

                errFocus
                エラーが表示されているとき、そのinput要素にfocusすると他のエラーにfadeOutというclassを付与する。デフォルトはfalse
              

              

                errHoverHide
                エラーにカーソルを乗せると非表示にする
              

              

                stepValidation
                複数個のエラーがある場合、ひとつひとつ処理する。デフォルトはfalse
              

              

                scrollToErr
                エラーがある場合、画面一番上のエラーまでスクロールする。デフォルトはtrue
              

              

                scrollDuration
                スクロールのduration
              

              

                scrollAdjust
                スクロール量の微調整。デフォルトは-10
              

              

                customScrollAdjust
                スクロール位置の指定。デフォルトはfalseで、数値または数値を返すfunctionを指定

              

              

                errPosition
                errInsertPosがbodyならabsolute、before(after)ならfixedを指定する。デフォルトはabsolute
              

              

                errTipPos
                エラーの表示位置。errPositionがabsoluteのときのみ。左か右か。デフォルトはright
              

              

                errTipCloseBtn
                エラーに閉じるボタンを表示するかしないか。デフォルトはtrue
              

              

                errTipCloseLabel
                閉じるボタンのラベル。
              

              

                errZIndex
                エラーのzIndex。指定があるときのみ。デフォルトは500
              

              

                errMsgPrefix
                エラーメッセージの頭に付ける文字
              

              

                customAddError
                エラーがあるとき、スクロール前に実行する関数
              

              

                customClearError
                エラーがないとき、Submit前に実行する関数
              

              

                customSubmit
                デフォルトのポストバックをキャンセルして実行する。Ajaxで通信を行う場合は、ここで指定する
              

              

                customListener
                input要素などにbindするlistenerを変更できる
              

              

                customBind
                2つのボタンにbindする場合、もう一方はこちらで指定 { object: $(), listener: ‘hoge’, callback: function }
              

              

                customGetErrHeight
                その内追記します
              

              

                firstValidate
                デフォルトはfalseで、送信ボタンを押すまで実行しない。trueにすると、入力毎にバリデーションを行う
              

            

            
使い方は見てるだけだと分からないと思うので、具体的なサンプルを2つ用意してます。

            
            
サンプルのパターン1

            

            
サンプル1の形式で実行する場合は以下のようにします。（サンプルではrulesをオプションで指定しています）

            
$("form")
  .exValidation({
    rules: {
      // 略
    },
    stepValidation: true
  });

            
サンプルのパターン2

            

            
サンプル2の形式で実行する場合は以下の通りです。errInsertPosとerrPositionを指定することでサンプル2のような形のエラー表示にすることができます。

            
$("form")
  .exValidation({
    rules: {
      // 略
    },
    errInsertPos: 'after',
    errPosition: 'fixed'
  });

            
errFocusを使う

            
errFocusを使うとエラーが出ている状態で対象要素にフォーカスすると、エラーチップ以外に[fadeOut]というclassを付与します。デフォルトでは .fadeOut { opacity: .2 } を指定しているので他のエラーが透ける感じですね。(ただしIEでは動作しません。。)

            

            
errFocusのサンプル

            
Ajaxでポストする

            
exValidationでは通常のポストバックに加え、customSubmitというオプションを使うことでAjaxによるポストや、その他独自のポストを行うことができます。customSubmit実行時は通常のポストバックはキャンセルされます。

            
$("form")
  .exValidation({
    customSubmit: function() {
      $.ajax({
        url: "data.php",
        type: "POST",
        dataType: "json",
        data: {
          name: $("#name").val()
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  });

            
下記のサンプルで、エラーがない状態でポストすると、コンソールログにObjectが表示されます。（コンソールがある環境で確認してください）

            
Ajaxポストのサンプル

            
任意の要素にバリデーションをbindする

            
customBindを使うと任意のボタンぽい要素（例えばアンカーとか）にポスト時のバリデーションを付加することができます。ポスト内容はcallbackで設定します。

            
customBind: {
  object: $(任意のhoge),
  listener: '任意のpiyo',
  callback: function() { /*実行したいfuga*/ }
}

            
例えば、日記を書くフォームがあったとして、通常のボタンに通常Ajaxポスト、プレビューボタンにはcustomBindでAjaxポスト、などのように使うことができます。

            
$("form")
  .exValidation({
    customBind: {
      object: $('#submit'),
      listener: 'click',
      callback: function() {
        alert('Fake POST');
      }
    }
  });

            
サンプルではただのアンカー要素にcustomBindしています。

            
customBindのサンプル

            
エラー時に関数を実行する、エラーがない場合に関数を実行する、スクロール位置を固定する

            
エラー時に関数を実行する

            
エラーがあったときに関数を実行したい場合はcustomAddErrorを指定します。指定した関数はスクロール前に実行されます。

            
エラーがない場合に関数を実行する

            
エラーがないときに関数を実行した場合はcustomClearErrorを指定します。指定した関数はsubmitやcustomSubmit前に実行されます。

            
スクロール位置を固定する

            
スクロール位置を固定したい場合は、customScrollAdjustを指定します。customScrollAdjustはデフォルトはfalseになっていますが、数値または数値を返す関数を指定できます。

            
この3つを一連の流れで実装したサンプルがありますので確認してください。

            
var validation = $("form")
  .exValidation({
    rules: {
      // 略
    },
    errInsertPos: 'after',
    errPosition: 'fixed',
    customAddError: function() {
      if ( $("#alert").length<1 ) {
        $("p.attention").before("
入力内容に誤りがあります。
");
      }
    },
    customClearError: function() {
      $("#alert").remove();
    },
    customScrollAdjust: function() {
      return $("#alert").offset().top;
    }
  });

            
ポイントはcustomScrollAdjustではcustomAddErrorで表示した追加エラー分のポジションを取得して返しているところでしょう。

            
スクロール位置の固定やエラー時の追加関数のサンプル

            
API

            
実行時にインスタンスを指定しておくと、APIを利用することができます。

            
var validation = $('form').exValidation();

            

              

                API
                値
              

              

                laterCall
                function(id) {} 任意のinput要素に対してバリデーションを任意のタイミングで行う
              

            

            
laterCall

            
laterCallを使うと任意のタイミングで指定したフォーム要素をバリデーションできます。

            
var validation = $('form').exValidation();
$('#button').click(function() {
  validation.laterCall('#name');
});

            
laterCallのサンプル

            
jQselectableとの併用

            
laterCallを利用するとjQselectableと併用することができます。具体例はサンプルを確認してください。

            
var validation = $("form").exValidation();
var selectable = $('#pref').selectable({
  callback: function() {
    validation.laterCall('#pref');
  }
});

            
バリデーションルール

            
exChecker-ja.jsを読みこめば基本的なバリデーションは行えますが、独自のルールを使いたいときは、exChecker-ja.jsを修正、追記するか、新しいバリデーションルールを書いたファイルを読み込みます。バリデーションルールは以下のように定義します。

            
(function($) {
  // Extend validation rules
  $.extend(validationRules, {
    chkretype: [
      '入力内容が異なります',
      function(txt, t) {
        var elm = $('#'+$(t).attr('class').split('retype\-')[1].split(/\b/)[0]);
        if ( elm.hasClass('group') ) {
          var chktxt = $('input', elm), txt = $('input', t);
          for ( var i=0, flag=false; i
            
$.validationRulesをextendする形でルールを記述します。バリデーションはclass名で行うので

            
class: [
  "エラーメッセージ",
  /RegExp/ or function(txt, t) {}
]

            
のようにハッシュのプロパティの中にメッセージとルールを配列として記述します。単純に正規表現だけでチェックするときは、Array[1]には/RegExp/、その中でさらに分岐などの条件を含む複雑なバリデーションルールの場合は、Array[1]にfunction(受け取るテキスト, 対象フォーム要素のid: 省略可) {}で記述します。

            
ライセンス

            
MITライセンスなので、ライセンス部分を改変しない限り個人商用問わず利用することができます。

            ただし、不具合など発生しても作者は責任を負いませんのでご了承ください。

            
その他

            
バグや要望などはgithubのIssuesにください。

            
github repository

            
            

              
            

            

              
何か役に立つことがあったらシェアしてみてください

              

                 
                  
                  
                
              

            

            

              
Related Entries

              
            

          



        

        
        

          
Comments: 163 - Leave a comment


          
Prev12345...Next

          
    
            
  1. 
              
    
                
    
                   long 
                
    
                
    
                  Reply
                
    
              
    
              
    
                
    はじめまして。
    
                サンプルがなぜかＩＥ、ＦＦで表示不良で困っていたのですが、原因が分かったのでお伝えしておきます。
    
                他の方からの連絡がすでにあればすみません。
    
                
    サンプルのスタイルの読み込みが
    
                ＜link type=”text/styles” rel=”stylesheet” href=”styles/style.css” /＞となっており type=”text/styles”の記述が不正です。
    
                type=”text/css”にしたらＩＥ／ＦＦとも正常に表示されました。
    
              
    
            
    2. 
            
  2. 
              
    
                
    
                   matsu 
                
    
                
    
                  Reply
                
    
              
    
              
    
                
    いつも愛用させていただいています。
    
                
    ひとつ質問なのですが、
    
                エラーの噴出しを表示した場合、×部分だけではなく、
    
                エラーの噴出し全体をクリックして、
    
                エラーを閉じることは可能でしょうか？？
    
                
    スマホサイトだと、×部分小さくて、クリックしにくいので、
    
                噴出し全体で閉じれればいいなぁと思いました。
    
              
    
            
    3. 
            
  3. 
              
    
                
    
                   ヒロオ 
                
    
                
    
                  Reply
                
    
              
    
              
    
                
    はじめまして。
    
                サンプルのスクリプトは動いているようですがCSSが効いていないようです。
    
                現在修正中でしょうか？
    
              
    
            
    4. 
            
  4. 
              
    
                
    
                   honda 
                
    
                
    
                  Reply
                
    
              
    
              
    
                
    はじめまして。
    
                さて、コチラで書かれている「チェックボックスで対象inputの必須をトグルする」についてですが、これはチェックボックスのみでラジオボタンでは機能しないと考えてよろしいでしょうか。
    
              
    
            
    5. 
            
  5. 
              
    
                
    
                   hide 
                
    
                
    
                  Reply
                
    
              
    
              
    
                
    はじめまして！バリデーションを探していたらこのサイトに行きつきました。
    
                さて、IE8、9でサンプルページを見るとスタイルシートが効いていないような表示がされてしまいます。PC４台で見ましたが同じ現象です。サンプルをダウンロードして表示してみましたが同様でした。chromeやスマホでは正常に表示されます。
    
                
    このプラグインはどのブラウザで動作するでしょうか？
    
                IEでは正常に動かないでしょうか？
    
                
    よろしくお願いいたします。
    
              
    
            
    6. 
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
          

          
Prev12345...Next

        

        

          Cancel to reply
          
Leave a comment

          
If you have bug tickets or nice idea, please post that at github repository issues, thx. バグや要望などはgithubのIssuesでください ;)

          
        

        

          
Trackbacks: 4


          

            
Trackback URL for this entry

            

            
Listed below are links to weblogs that reference

            

              どんなフォームにも使えるjQueryのフォームバリデーション exValidation from 5509
            

          

          
    
            
  1. 
              
    
                pingback from バリデータチェック | PHPお試し実験室 
              
    
              
    
                
    [...] アクティベートするだけと、まー簡単です！！ 詳しくはコチラ [...]
    
              
    
            
    2. 
            
  2. 
              
    
                pingback from another side of view » Blog Archive » どんなフォームにも使えるjQueryのフォームバリデーション 
              
    
              
    
                
    [...] どんなフォームにも使えるjQueryのフォームバリデーション [...]
    
              
    
            
    3. 
            
  3. 
              
    
                pingback from jQueryデザイン入門 第3章 (6) - hachinana 
              
    
              
    
                
    [...] フォームのバリデーションを実装するjQueryプラグインでは、nori氏のexValidationと、Cedric Dugas氏のInline Form Validation Engineが好き。 [...]
    
              
    
            
    4. 
            
  4. 
              
    
                pingback from Contact Form 7でのバリデーションはjQueryプラグインのexValidationが便利！ | モンキーレンチ 
              
    
              
    
                
    [...] 必須チェックしかバリデーション機能がなかったので、「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」と組み合わせてバリデーション機能を追加してみまし [...]
    
              
    
            
    5. 
          

        

      

    

    

      

        
Author

        
nori

        

          

            
nori

            
- UI Engineer

          

          

            
Location

            
- ,