ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

2017-06-03 最終更新日:2017-06-04

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。

CSSのフレームワークBootstrap3をお使いの方ならすんなりと入れるかと思います。下記は公式サイト

Validator, for Bootstrap 3

このプラグインは、Bootstrapの中核となるjQueryプラグインに依存しています。bootstrap.jsと一緒に使います。 Validatorプラグインは、主にHTML5の標準属性を介して設定可能な自動フォーム検証を提供します。誰も不気味なフォームを好きではないので、邪魔にならないユーザーエクスペリエンスも提供します。

特徴としてはdata-apiと標準のHTML5属性を使用して設定可能、エラーを通知し、エラーが解決されたことを知らせる、フォームが有効で、すべての必須フィールドが完成するまで、送信は無効です、カスタマイズ可能なエラーメッセージ、 カスタムバリデータ関数、AJAXによる入力フィールドの検証です。


スポンサーリンク


Validator, for Bootstrap 3の使い方

インストール方法は以下の通りです、npmが最近は多いですね。簡単にCDNを使って確認できます。

  • CDN on CDNJS: https://cdnjs.com/libraries/1000hz-bootstrap-validator
  • Clone the repo: git clone https://github.com/1000hz/bootstrap-validator.git.
  • Bower: bower install bootstrap-validator.
  • npm: npm install bootstrap-validator.

そして下記のように組み込みます。jQueryは公式サイトからあらかじめダウンロードするなりCDNを使うなりで入れておいて下さい。

<script src="dist/js/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/validator.min.js"></script>

フォームの検証は、data-apiまたはJavaScriptを使用してマークアップで有効にすることができます。 form要素にdata-toggle=”validator”を追加することでフォームの検証を自動的に有効にします。

<form role="form" data-toggle="validator">
  ...
</form>

これで準備が整いました。あとは必須項目にrequiredを入れるだけです。 たとえば名前フィールドが必須の場合は

<input type="text" class="form-control" id="inputName" name="name" placeholder="お名前" required>

とするだけです。簡単ですね。エラーでこのフィールドを入力してください。と表示されますがエラーメッセージを変えたい場合は

<input type="text" class="form-control" id="inputName" name="name" placeholder="山田 太郎" data-error="お名前は入力必須です" required>
<div class="help-block with-errors"></div>

data-error属性をつけてメッセージを入れます。メッセージを出力するdiv要素のクラス名にhelp-block with-errorsをつければOKです。

<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password" data-minlength="6" required>

最小文字数が必要な場合はdata-minlength属性に数字を入れればその文字数が超えないとエラーになります。あまり複雑なバリデートができませんが簡単なバリデートはこれだけで十分ですね。

サンプルのサイトがありますので確認できます・

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

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

Similar Posts

最近の投稿

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

validata js バリデータ
フッターイメージ