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

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

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

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

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

実装準備

以下を、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は好きなものにしてください。

Advertisement

JavaScript

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: '名前は必須です'
         }
},

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

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

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チェックバリデーターを設置できます。

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

このブログを購読する

当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可を押してください。
押してやってください。
ブログ更新後、ブラウザより更新通知が送られます。