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-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

icatch-disappear_7186028511_mini-thumbnail

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

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

記事を読む

icatch-pointer_7269926502_mini-thumbnail

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

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

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

icatch-simcity_536954375_mini-thumbnail

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

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

記事を読む

icatch-exception_2482521750_mini-thumbnail

Error オブジェクトの種類と独自例外オブジェクトの作成方法

JavaScript で例外オブジェクトを扱ったことがなかったので、簡単な内容ですが例外オブジェクト

記事を読む

icatch-painting_mini

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

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

記事を読む

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

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

記事を読む

Googleアドセンス用(PC)

Message

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


4 + = 九

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