BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました

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

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた で紹介した BootstrapValidator ですが、業務で作成中の Web アプリでいくつかバリデーションを使って見ました。
基本的なバリデーションだけで事が足りてしまったので、あまり参考にならないかもしれませんが実装方法をシェアしたいと思います。

また、動作確認用に簡単なサンプルサイトも設置しましたので、実際に使い勝手をご確認ください。

icatch-checklist_4439276478_mini

photo credit: Alan Cleaver via photopin cc

目次

1. 使用したライブラリ

次の3つのライブラリを使っています。

  • jQuery → v1.11.0
  • Bootstrap → v3.1.1
  • BootstrapValidator → v0.3.3
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>

jQuery と Bootstrap は CDN 参照。

BootstrapValidator は次の URL から zip がダウンロードできるので、それを展開して js ディレクトリにファイルを置きました。

2. 実装したバリデーションチェック

個々のバリデーションを説明する前に、共通設定は次のようになっています。

  • バリデーションのタイミング → Live チェック
  • フィードバックアイコン → 表示する

その辺りの JavaScript はこんな感じに実装しています。

<script type="text/javascript">
    $(function() {
        $('form').bootstrapValidator({
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                // ここに入力項目単位でバリデーションを定義する
            }
        });
    });
</script>

何のことだかよく分からんという方は、この辺りを説明してある前回の記事を参考にしてください。

2-1. 必須チェック → notEmpty

これも前回の記事とかぶってしまうんですが、基本なのでソースコードを載せておきます。

notEmptyText: {
    validators: {
        notEmpty: { message: '必須なテキストは必須項目です' }
    }
}

validators にチェックしたいバリデータを定義していきます。
ここでは必須チェックだけを確認したいので、notEmpty のみを定義しています。

notEmptymessage だけをパラメータに指定します。
ここに書いた文字列が、バリデーションエラーだった場合に表示されます。
この message の扱いは、他のどのバリデータでも同じです。

notEmptyText の部分には、このバリデータと紐付ける input タグの name 属性を指定します。
その input タグの HTML は次の通り。

<label for="notEmptyText" class="col-sm-3 control-label">必須なテキスト</label>
<div class="col-sm-4">
    <input type="text" class="form-control" id="notEmptyText" name="notEmptyText" placeholder="
この項目は必須です">
</div>

2-2. ゼロと正の整数チェック → digits

次のバリデータは、ゼロと正の整数チェックをするバリデータ digits です。

digitsText: {
    validators: {
        notEmpty: { message: '0 と正の整数のテキストは必須項目です' },
        digits: { message: 'この項目は 0 と正の整数を入力してください' }
    }
}

ここでは、notEmptydigits を定義しています。
ブランクじゃなくて、かつ、値が 0 もしくは正の整数だった場合にパスするバリデーションチェックとしました。
このように複数のバリデータを組み合わせることも可能になっています。

digitsmessage だけをパラメータに受け付けるバリデータとなっています。

紐づく input タグは次の通りです。

<label for="digitsText" class="col-sm-3 control-label">0 と正の整数のテキスト</label>
<div class="col-sm-4">
    <input type="text" class="form-control" id="digitsText" name="digitsText" placeholder="0 と
正の整数を入力してください">
</div>

2-3. 正規表現を使った実数チェック → regexp

次のバリデータは、正規表現で確認する regexp です。
まぁ、このバリデータだけ知っていれば、だいたいはこれでカバーできちゃうってヤツです。

realNumberText: {
    validators: {
        notEmpty: { message: '実数のテキストは必須項目です' },
        regexp: { message: '実数を入力してください', regexp: /^[-]?\d+(\.\d+)?$/ }
    }
}

ブランクじゃなくて、かつ、数値であればパスするバリデーションチェックとしました。
regexp の値に正規表現を指定します。 の部分で正規表現を指定します。

この /^[-]?\d+(\.\d+)?$/、いちおう「値が実数であるか」を定義したつもりです。
おそらく問題ないかと思いますが。

input タグのところは他と似たようなものなので省略。

2-4. 文字数チェック → stringLength

stringLength は、入力された文字列の文字数をチェックしてくれるバリデータです。

stringLengthText: {
    validators: {
        notEmpty: { message: '文字数チェックのテキストは必須項目です' },
        stringLength: { message: '5文字以内で入力してください', min: 1, max: 5 }
    }
}

stringLength はパラメータを3つ受け取ります。
message の扱いはこれまでと同じです。min には最小文字数を指定し、 max には最大文字数を指定します。

この例は min=1,max=5 としているので「1文字以上5文字以下」というバリデーションチェックになっています。

あー、最小文字数が1以上なので notEmpty は不要ですね。。。

2-5. 日付けフォーマットチェック → date

最後に date です。
これは日付のフォーマットをチェックしてくれるバリデータです。

dateText: {
    validators: {
        notEmpty: { message: '日付フォーマットチェックのテキストは必須項目です' },
        date: { message: 'yyyy-MM-dd で入力してください', format: 'YYYY-MM-DD' }
    }
}

date のパラメータ format でフォーマットを指定します。
フォーマットに使えるトークンは一般的なものになっているので、特に迷うこともなく使えると思います。

3. BootstrapValidator のサンプルサイトを作成しました

これらのバリデータを試せるサンプルサイトは、次の場所に公開してあります。

BootstrapValidatorSample

まったく飾り気の無いデザインとなってますが、いちおう動きます。

BootstrapValidatorSample-02

4. サンプルサイトのソースコードを GitHub に登録しました

今回の記事で使用したサンプルサイトのソースコードを Github に登録しました。

サンプルサイトに公開しているプログラムは v0.1.0 でタグ付けしてあります。
そのリンクも貼っておきます。

よかったら参考にしてみてください。

5. まとめ

以上、BootstrapValidator の基本的なバリデーションを紹介しました。

わずか数行でバリデーションチェックが行えるのは、ホントにお手軽だと思います。

管理系画面など、一般ユーザが目にしない部分は Bootstrap + BootstrapValidator の組み合わせでがっつり工数削減するのもありかなと思っています。

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

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

Googleアドセンス用(PC)

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

関連記事

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-pointer_7269926502_mini-thumbnail

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

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

記事を読む

icatch-where

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

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

記事を読む

icatch-flag_1395019914_mini-thumbnail

GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する

前回アップした GoogleMaps の JavaScript API (v3) を使って地図上に複

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-automatic_2714993937_mini-thumbnail

Grunt + QUnit + PhantomJS でテストを自動実行してくれる環境を構築する

先日投稿した GoogleMap サンプルのプロジェクトに Grunt の LiveReload を

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-drill_mini

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

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

記事を読む

icatch-format_mini-thumbnail

JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip

記事を読む

Googleアドセンス用(PC)

Message

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


3 × 五 =

次の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 ↑