ブートストラップバリデータ使い方 - 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

サイト内検索

最近の投稿

アイキャッチ
ブラウザ上でデザインができるツールのCanva(キャンバ)のご紹介

簡単にプロ並みのデザインという感じで作成できてしまうデザインツールのご紹介です。 デザインのスキルはなくてもテンプレートから選ぶだけで、必要な素材をドラッグアンドドロップで簡単に出来てしまうツー...

11 Dec 2018

アイキャッチ
WordPress内でFTP操作ができるプラグインFile Managerのご紹介

今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレ...

26 Nov 2018

アイキャッチ
WordPressでPHPの値をJavaScriptファイルへ渡す方法

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。 PHPの値をJavaScriptで処理を行う...

22 Nov 2018

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

著者

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

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

タグクラウド

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