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

Jun 3, 2017

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

2017-06-03 最終更新日:2017-06-04
validata js バリデータ

今回はフォームバリデータのご紹介です。前回の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∞

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

Similar Posts

最近の投稿

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒画像加工・写真編集|Fotor - 無料オ...

20 May 2017

著者

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

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

タグクラウド

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