jQuery-Validation-Engineで簡単にフォーム内容をチェック!

2015-02-20



フォームを伴うHTMLコードを書いていると、どうしてもバリデーション(入力値の妥当性確認)が必要になります。
HTML5になると、フォーム属性である程度はカバー出来ますが、全てのブラウザがHTML5に対応し、かつ利用者の多くがこれの恩恵を受け、かつ対応出来ないブラウザを利用している方を切り捨てる時代になるにはまだまだ数年掛かります。

バリデーションの方法は大きく分けてPOST後とPOST前の二種に分かれます。
POST後のバリデーションは送信された際に、PHPやCGI側で入力内容をチェックし、エラーならメッセージを表示させるなどです。

厳密にチェックするならばこれが一番ですし、エラーメッセージなどデザイン部分も色々と工夫する事が出来ます。
ただ、簡単なメールフォームでいちいちメールアドレス形式かどうかを確認する為だけにPOSTし、エラーメッセージを表示するプログラムを書くのは面倒です。

※SQLインジェクションに関して誤解をされている方がいるようなので該当部分を削除しました。int系のフィールドに対して数値入力に制限させたい、といった事前処理として有効であるという意味です。POST後にも値を検証するのは当然の事で、jsのみでSQLインジェクション等に対抗出来る訳では御座いません。

最近はjavascriptを使い、POSTの前に入力値を確認する方法が主流になっています。色々なライブラリが公開されていますが、私が愛用しているjQuery-Validation-Engineのご紹介と利用方法を説明したいと思います。

ダウンロードはGitHubからどうぞ

色々とファイルが入っていますが、使うのは以下だけです。あと、jQueryライブラリーなのでこれも読み込んでおいて下さい。

 <link href="validationEngine.jquery.css" rel="stylesheet" type="text/css" /> <script src="jquery.validationEngine.js"></script> <script src="jquery.validationEngine-ja.js"></script> 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

初期設定

jQuery(document).ready(function(){
  jQuery("#form").validationEngine();
});
  <form id="form" method="post" action="">
  </form>

#formの部分が重要で、formに設定したIDとします。



メッセージの位置(1)

表示されるメッセージの位置を変更します。


bottomLeft

bottomRight

topLeft

topRight



jQuery(document).ready(function(){
  jQuery("#sample2_1").validationEngine('attach', {
    promptPosition:"bottomLeft"
  });
  jQuery("#sample2_2").validationEngine('attach', {
    promptPosition:"bottomRight"
  });
  jQuery("#sample2_3").validationEngine('attach', {
    promptPosition:"topLeft"
  });
  jQuery("#sample2_4").validationEngine('attach', {
    promptPosition:"topRight"
  });
});

 


メッセージの位置(2)

ちょっと見辛くはなりますが、左右に表示する事も可能です。

centerLeft

centerRight

あと、エラーメッセージをガツンと表示したい場合などはインラインを指定すると良い感じです。

inline



jQuery(document).ready(function(){
  jQuery("#smp_1_1").validationEngine('attach', {
    promptPosition:"centerLeft"
  });
  jQuery("#smp_1_2").validationEngine('attach', {
    promptPosition:"centerRight"
  });
  jQuery("#smp_1_3").validationEngine('attach', {
    promptPosition:"inline"
  });
});

エラーメッセージを変更する

基本的にランゲージファイルで各フォームで共用するのが楽ですが、フォームごとにメッセージを変更したいケースがあると思います。


<input type="text" id="smptxt4" class="validate[required] text-input"  data-errormessage-value-missing="ちゃんと書いてね!" />
<input type="submit" />

エラーメッセージの位置を個別に変更する

フォームによっては、画像や説明文などに被ってしまい、メッセージの位置を個別に変更したいケースもあると思います。

bottomLeft

bottomRight

topLeft

topRight

inline

<input type="text" id="smptxt5_1" class="validate[required] text-input" data-prompt-position="bottomLeft" />
<input type="text" id="smptxt5_2" class="validate[required] text-input" data-prompt-position="bottomRight" />
<input type="text" id="smptxt5_3" class="validate[required] text-input" data-prompt-position="topLeft" />
<input type="text" id="smptxt5_4" class="validate[required] text-input" data-prompt-position="topRight" />
<input type="text" id="smptxt5_5" class="validate[required] text-input" data-prompt-position="inline" />

テキストエリアの設定 – 基本


  <input type="text" id="text3_1" class="validate[required] text-input" />
  <input type="submit" />

 

テキストエリアの設定 – 文字数を制限する

3文字以上

6文字以内

3文字以上6文字以内

  <input type="text" id="text3_2_1" class="validate[required,minSize[3]] text-input" />
  <input type="text" id="text3_2_2" class="validate[required,maxSize[6]] text-input" />
  <input type="text" id="text3_2_3" class="validate[required,minSize[3],maxSize[6]] text-input" />
  <input type="submit" />

 

テキストエリアの設定 – 入力値をURLやメールアドレスなどに制限する

email

url

  <input type="text" id="text3_3_1" class="validate[required,custom[email]] text-input" />
  <input type="text" id="text3_3_2" class="validate[required,custom[url]] text-input" />
  <input type="submit" />

 

テキストエリアの設定 – 数値に制限する

12.45はダメ


  <input type="text" id="text3_4_1" class="validate[required,custom[integer]] text-input" /> 
  <input type="text" id="text3_4_2" class="validate[required,custom[number]] text-input" />
  <input type="submit" />

 

パスワード – 一致確認

<input class="validate[required] text-input" type="password" id="passwd" />
<input class="validate[required,equals[passwd]] text-input" type="password" id="re_passwd" />
  <input type="submit" />
一致確認はパスワードに限りません。以下はメールアドレスのケース

<input class="validate[required,custom[email]] text-input" type="text" id="email" />
<input class="validate[required,equals[email]] text-input" type="text" id="re_email" />
  <input type="submit" />

 

セレクトボックス


  <select id="sample5_1" class="validate[required]">
    <option value="">-select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

 

ラジオボタン

idをユニークにする点に注意して下さい。



  <input type="radio" class="validate[required] radio" name="radio_name" id="radio1" value="radio1"> <label for="radio1">radio1</label>
  <input type="radio" class="validate[required] radio" name="radio_name" id="radio2" value="radio2"> <label for="radio2">radio2</label>
  <input type="radio" class="validate[required] radio" name="radio_name" id="radio3" value="radio3"> <label for="radio3">radio3</label>

但し、本来のラジオボタンは「選択されている状態」がデフォルトで、選択されていない状態ということ自体が厳密には正しく有りません。。つまり、ラジオボタンにはバリデーションそのものが本来は不要です。

しかし、デフォルトでチェックしておくとユーザーが見落とす場合が有り、それを詐欺だと言う方も居るようで、バリデーションを入れておくのが慣例となっているようです。

 

チェックボックス

<input type="checkbox" class="validate[required] checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox1</label>

 

 

その他色々と有りますが、ダウンロードしたファイルにサンプルが有りますのでそちらをご覧下さい。一般的なフォームであれば、このくらいを覚えておけばどうにかなります。
さて、jQuery-Validation-Engineはバリデーションが完了した際にPOSTせず、関数を実行する事が出来ます。私がこれを愛用している最大の理由となります。


    jQuery(document).ready(function(){
        jQuery("#sample8").validationEngine( 'attach', {
             ajaxFormValidation: true
            , onBeforeAjaxFormValidation: beforeCall
        });
        
         function beforeCall(){
           alert('入力チェックが完了しましたよ!');
         }
    });

このように設定すると、入力チェックが完了して送信可能な状態になった際に、beforeCall()が実行され、POSTされません。

これが出来ると、ここで確認画面を表示する処理が行えるのです。つまり、POSTせずにノンリロードで確認画面を表示する、最近流行りのアレです。

そもそもなぜノンリロードで確認画面を表示する必要があるのか?ですが、利用者にストレスを与えない点と、サーバーとの無駄な通信を行う必要がないためです。

また、上記のページでは言及していませんが、一番最後に非同期通信で送信するのではなくPOSTする事も可能です。つまり、入力→確認画面→戻る→確認画面、という一連の流れはノンリロードで行い、最後の送信部分だけPOSTします。

  $(document).ready(function(){
      $("#from").validationEngine( 'attach', {
           ajaxFormValidation: true
          , onBeforeAjaxFormValidation: beforeCall
      });

       function beforeCall(){
         /*
          * 確認画面の処理とか
          */
       }
       
       /*
        * 戻ったりする処理を書いて
        * .......
        * ..............
        */
       
       
       /*
        * 送信ボタンが押されたらPOST
        */
          $(document).on('click','#send_button',function(){ 
            document.form.submit();
          });
  });

覚えてしまうと本当に簡単ですので、ぜひ使ってみて下さい