入力項目をリアルタイムチェック【BootstrapValidator】

お問い合わせや登録ページ等の入力が必要な項目をリアルタイムでチェックを行い、ユーザービリティの向上ができるLIVEチェックバリデーター「BootstrapValidator」の実装方法を紹介。

お問い合わせや、登録ページ等の入力の際、半角全角のチェックや禁止文字の入力、確認用アドレスやパスワードの一致の確認など、入力しているその場でわかれば、エラーに対して離脱する人を防ぐことができるかもしれません。

この記事では「BootstrapValidator」というライブラリーを紹介します。
ですので、ブートストラップを使って構築しているサイトに適しています。
なぜ、ブートストラップなの？って、ブートストラップのサイト用のバリデーターを探してたら、たまたまブートストラップのバリデーターがあったからです！！

実装準備
html
JavaScript
入力不備でエラー箇所へスクロール
まとめ

実装準備

以下を、head内に追加。
3行目は作成するファイルになるので、ディレクトリは任意の場所を記載してください。

head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="○○○/js/bootstrapValidator.js"></script>

cssは、ブートストラップのデザインで表示させます。

※上記がデザイン表示イメージです。

html

HTML

<form id="form01">
  <div class="form-group">
    <label for="name">お名前</label>
    <input type="text" class="form-control" name="name" />
  </div>
  <div class="form-group">
    <label for="mail">メールアドレス</label>
    <input type="text" class="form-control" name="mail" />
  </div>
  <div class="form-group">
    <label for="mailconfirmed">メールアドレス（確認用）</label>
    <input type="text" class="form-control" name="mailconfirmed" />
  </div>
  <button type="submit">SUBMIT!!</button>
</form>

必要なのは、【form-group】というclassの中に各入力項目を入れる事と、
inputタグやselectタグに【form-control】というclassを入れてください。
formのidは好きなものにしてください。

JavaScript

$('#form01').bootstrapValidator({
    message: '内容を入力してください。',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
         name: {
             validators: {
                  notEmpty: {
                       message: '名前は必須です'
                  },
                  stringLength: {
                       min: 2,
                       max: 12,
                       message: '2文字以上で12文字以内でお願いします。'
                  },
                  regexp: {
                       regexp: /^[a-zA-Z0-9_\.]+$/,
                       message: '半角英数字で入力してください'
                  }
           },
         mail: {
             validators: {
                  notEmpty: {
                       message: 'メールは必須です'
                  },
　　　　　　　　　  emailAddress: {
　　　　　　　　　　　　message: 'メールアドレスをお確かめください'
　　　　　　　　　  }
           },
         mailconfirmed: {
             validators: {
                  notEmpty: {
                       message: 'メール（確認用）は必須です'
                  },
　　　　　　　　　  emailAddress: {
　　　　　　　　　　　　message: 'メールアドレスをお確かめください'
　　　　　　　　　  },
                  identical: {
                        field: 'mail',
                        message: 'メールアドレスが一致しません'
                  }
           }
     }
});

ほとんど、このJSでバリデーターを制御するイメージです。

【message】というところで、表示させるエラーテキストを変更できますが、何も入れなければデフォルトでエラーテキストが英文で表示されます。
【emailAddress】を入れるとメールアドレス（＠マークの入った）の文字列に制限されます。
【url】にすると、http://～からはじまる文字列だけに制限されます。

【regexp】項目で文字を入力する文字を制限できます。
以下の様に変更すると半角英数記号のみで空文字も大丈夫です。
複雑なパスワードの入力などの時にいいかもしれません。

regexp: /^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/,

チェックするタイミングを変えたりなど、その他にもオプションがあります。
フォーカスが外れたタイミングでチェックさせる場合は、以下の2行目のようにtrigger=’blur’を入れてください。

name: {
    trigger='blur',
    validators: {
        notEmpty: {
            message: '名前は必須です'
         }
},

その他のオプションは本家サイトで確認してください！ｗｗ

http://bootstrapvalidator.votintsev.ru/settings/

入力不備でエラー箇所へスクロール

javascript

$('#form01 button').click(function() {
  $('#form01').bootstrapValidator('validate');
    var errorPos = ($('.has-error:first').get(0).offsetTop && $('.has-error:first').offset().top) || 0;
  $('html,body').animate({scrollTop: errorPos}, 'slow');
});

サブミットボタンを押したタイミングで再度フォームをバリデートし、エラー箇所にスクロール。
デフォルトでもスクロールはしませんが、エラー箇所に移動してくれます。
何も入力してない状態でサブミットを押したときに「おいおい、ちょ待てよ、まだ入力してないじゃないか」みたいな感じです。

まとめ

ユーザービリティの向上ができるLIVEチェックバリデーター。
ブートストラップありきではありますが、デザインなど視認性の高い緑のOKチェックと赤の×マーク。
javascriptの設定は面倒なところもありますが、それさえ設定できればさほど時間をかけずにLIVEチェックバリデーターを設置できます。

ちょうど入力項目のバリデーターの設置を考えてて、なおかつブートストラップを使ってる人は試してみてください。