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

サイト内検索

最近の投稿

アイキャッチ
bootstrap4でのtable-responsiveをレスポンシブにする

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。 さて...

16 Jun 2018

アイキャッチ
CSSでの画像ホバー効果ライブラリのご紹介

今回は純粋なCSS画像ホバー効果ライブラリをご紹介します。画像をマウスオーバーするとテキストが表示されるCSSライブラリになります。実装も簡単でクラス指定をすることで40種類以上の効果を体験でき...

10 Jun 2018

アイキャッチ
ワードプレスで特定のページにnoindex,nofollow

ワードプレスに特定のページにmeta name="robots" content="noindex,nofollow"をつける場合はプラグインを利用するかヘッダーに条件分岐でいれるかだと思います...

03 Jun 2018

アイキャッチ
Vagrantのアンインストール方法-Mac版

さて今回は簡単にご紹介、そもそもそんなにvagrantをアンインストールしないのですがそういう機会があったので覚書で記載しておきます。 Mac版のvagrantってアンインストールってなぜか手...

26 May 2018

アイキャッチ
超絶・超速のnode-sassでsassコンパイルのすすめ

さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他...

12 May 2018

著者

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

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

タグクラウド

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