ブートストラップバリデータ使い方 - 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でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前[Franz](https://its-office.jp/blog/app/201...

22 Jan 2019

アイキャッチ
島根県安来市の清水寺の展望台は絶景スポット

先日清水寺にお参りに行って参りましたが春にはとても良いスポットがありましたのでご紹介します。山の上になるのですが見渡せる場所はどちらかといえば弓ヶ浜半島、米子市の方面を一望できます。王子製紙の場...

21 Jan 2019

著者

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

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

タグクラウド

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