TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

公開日: : 最終更新日:2014/05/05 JavaScript , ,

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の jQuery プラグインで、入力内容のバリデーションチェックを行うプラグインです。

このプラグインを使って必須項目チェックと、バリデーションの Live チェックを試してみました。
手軽に導入できたのでその手順をシェアしたいと思います。

icatch-plug_8436280178_mini

photo credit: mariacasa via photopin cc

目次

1. 導入手順

まずはプロジェクトへの導入から。

1-1. プログラムのダウンロード

現在(2014/03/31)プログラムの最新バージョンは v0.3.3 になっていて、zip は次からダウンロードできます。

これは試していませんが、Bower が使える環境なら、次のコマンドからでも入手できるようです。

$ bower install bootstrapValidator

1-2. ファイルの設置

バリデーションチェックをしたい画面の HTML に JavaScript と CSS のタグを追記します。
使用する JavaScript と CSS は、それぞれ次のディレクトリにあるものになります。

  • dist/js/bootstrapValidator.min.js
  • dist/css/bootstrapValidator.min.css

圧縮されていない方のファイルもあります。
どちらを使うかはお好みでどうぞ。

HTML に追加するタグは次のような感じになります。

:
:
<!-- bootstrapvalidator -->
<link rel="stylesheet" href="/path/to/css/bootstrapvalidator/bootstrapValidator.min.css">
:
:
<!-- bootstrapvalidator -->
<script src="/path/to/js/bootstrapvalidator/bootstrapValidator.min.js"></script>
:
:

2. 必須のバリデーションチェックを試す

BootstrapValidator では以下のサイトにあるように、25種類のバリデーションチェックをサポートしています。

今回は基本中の基本である必須チェックを試してみます。

2-1. 必須のバリデーションチェック(エラーメッセージだけ)

「タイトル」を入力する input タグに対して、必須チェックを行うバリデーションを設定してみます。

form は次の通り。

<form id="registerForm" class="form-horizontal" role="form" method="POST" action="./preview">
    <div class="form-group">
        <label for="inputTitle">タイトル</label>
        <input type="text" class="form-control" id="inputTitle" placeholder="タイトルを入力してください" name="title" value="" >
    </div>
    <div class="form-group">
        <button id="button-confirm" type="submit" class="btn btn-primary">確認</button>
    </div>
</form>

必須チェックを行うバリデーションは次のような JavaScript で行えます。
項目に対するバリデーション設定は JSON で書くようです。

$(function() {
    $('#registerForm').bootstrapValidator({
        fields: {
            title: {
                validators: {
                    notEmpty: { message: 'タイトルは必須です' }
                }
            }
        }
    });
    $('#button-confirm').click(function() {
        $('#registerForm').bootstrapValidator('validate');
    });
});

この設定だと ↓ の画像のように、未入力の場合は「タイトルは必須です」というメッセージが入力欄の下に表示されます。

notEmptyError-2

ちょっと親切なのが、エラーを解除しないとボタンがクリックできなくなっている点。
入力 → ボタンクリック → エラーチェック → 入力 → ボタンクリック → 。。。というサイクルにならないのは、ユーザにとっても開発者にとっても親切な仕組みではないでしょうか。

2-2. 必須のバリデーションチェック(Glyphicon 付き)

JSON に feedbackIcons を設定しておくと、チェックにパスした場合・パスしなかった場合に Glyphicon が表示されます。

上記の JSON にその部分を追加したものがこちら。

$(function() {
    $('#registerForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            title: {
                validators: {
                    notEmpty: { message: 'タイトルは必須です' }
                }
            }
        }
    });
    $('#button-confirm').click(function() {
        $('#registerForm').bootstrapValidator('validate');
    });
});

Glyphicon が表示された入力欄はこんな感じです。
こういうアイコンが表示されると直感的で分かりやすいですよね。

validation-success

validation-failure

2-3. 必須のバリデーションチェック(Live チェック)

バリデーションの Live チェックもできます。

Live チェックは次の3パターンで指定できます。

  • enabled: 項目値が変更されたタイミングでバリデーションチェックを実行する
  • disabled: Live チェックは無効。submit されたタイミングでバリデーションチェックを実行する
  • submitted: submit されたら Live チェックが有効になる

それぞれの設定でキャプチャ撮ったので、項目別にお見せします。

enabled の場合

Live チェックを有効にする場合の JSON は次の通りになります。

$(function() {
    $('#registerForm').bootstrapValidator({
        live: 'enabled',
        fields: {
            title: {
                validators: {
                    notEmpty: { message: 'タイトルは必須です' }
                }
            }
        }
    });
    $('#button-confirm').click(function() {
        $('#registerForm').bootstrapValidator('validate');
    });
});

これが初期表示。
入力欄は特に普通に表示されます。

enabled-1

ここに “a” と入力してみると、「何か入力された → バリデーションにパスした」ので、入力欄の枠が緑色になります。

enabled-2

この “a” を消すと、「値が空 → バリデーションにパスしていない」ので、入力欄の枠が赤色になります。

enabled-3

もちろん、いきなり submit をクリックしてもバリデーションチェックは走ります。
見た目的には ↑ の画像と同じです。

enabled-4

disabled の場合

Live チェックを無効にする場合は、 disabled にします。

$(function() {
    $('#registerForm').bootstrapValidator({
        live: 'disabled',
        fields: {
            title: {
                validators: {
                    notEmpty: { message: 'タイトルは必須です' }
                }
            }
        }
    });
    $('#button-confirm').click(function() {
        $('#registerForm').bootstrapValidator('validate');
    });
});

disabled で Live チェックは無効になります。
submit したときだけバリデーションチェックが実行されます。

なので、”a” と入力しても枠が緑色にならないし、

disabled-1

その状態から “a” を消しても枠が赤色になりません。

disabled-2

submit したときにバリデーションチェックを実行してくれるので、この状態で submit するとエラーメッセージが表示されます。

disabled-3

submitted の場合

submitted という、初期表示は Live チェックが有効にならないが、submit 後には Live チェックが有効になるって設定もあります。

$(function() {
    $('#registerForm').bootstrapValidator({
        live: 'submitted',
        fields: {
            title: {
                validators: {
                    notEmpty: { message: 'タイトルは必須です' }
                }
            }
        }
    });
    $('#button-confirm').click(function() {
        $('#registerForm').bootstrapValidator('validate');
    });
});

初期表示は disabled と同じ動きなので、”a” と入力しても枠が緑色にならないし、

submitted-1

“a” を消しても枠が赤色になりません。

submitted-2

submit 後は Live チェックが有効になるので、試しにこの状態で submit してみると、このように怒られます。

submitted-3

すかさず “a” と入力してみると、入力欄の枠が緑色になります。
Live チェックが有効になっています。

submitted-4

Live チェックが有効になっているので、今度は “a” を削除すると、枠が赤色になります。

submitted-5

3. まとめ

以上、BootstrapValidator の導入から Live チェックまでの手順でした。

TwitterBootstrap3 で構築したサイト限定になりますが、覚えておいて損はないかと思います。
ボクも含めて特にデザインができないプログラマさんとか。

4. その他の JavaScript に関する記事

JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-painting_mini

jQuery を使ってタグに設定されているクラスをすべて取り除いた後に指定のクラスに変更する

jQuery を使ってタグに設定されているすべてのクラスを取り除いた後に指定のクラスを設定する方法で

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-simcity_536954375_mini-thumbnail

GoogleMapsAPIを使ってMarkerを削除する方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を削除する方法に

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-darts_1543970905_mini-thumbnail

GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する

記事を読む

icatch-where

jQuery を使ってファイルアップロードフォームのファイルが選択されているかを確認する方法

HTML に設置したファイルアップロードフォームにファイルが選択されているかを確認する方法を調べまし

記事を読む

icatch-drill_mini

Underscore.js の template を使ってドリルダウンを実装するスニペット

先日、Underscore.js の template と each を使って JSON から se

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


1 × = 六

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑