Bootstrap+jQuery Validation Engineでお問い合わせフォームを作成してみた。


Bootstrap+jQuery Validation Engineでお問い合わせフォームを作成してみた。

 

Bootstrap の Forms を使って、お問い合わせフォームを作成し、作成したフォームにjQuery Validation Engineを使用し入力チェック機能を追加してみる。

「jQuery Validation Engine」はフォーム送信前に、「入力されているか」、「チェックの数は合っているか」 などの設定が手軽に出来るのでおすすめです。

また、HTML5でも input要素に required属性を付けるだけで、ブラウザが「このフィールドを入力してください。」(各ブラウザごとに異なる)などとアラートを出しますが、デザインの統一や機能性などを考えるとまだまだかなと思いますので、今回は 「jQuery Validation Engine」 を使用します。

 

Bootstrapの機能を使用しフォームを作成してみる。(Bootstrap各種ファイルの設定は済んでいるものとします。)

Bootstrap のサンプルにBasic exampleがありますが、今回はそのもう少し下にあるHorizontal formを使用します。

Horizontal formは「項目名」と「入力欄」が水平に配置される仕組みとなっています。

水平配置のHorizontal formを使用するには以下のクラス名を付与し、グリッドを用いて記述します。

 

Bootstrap公式での Horizontal form  の サンプルコード

↓ ブラウザでの画面 ↓
Bootstrap-horizontal-form

 

上記を元に、それとBootstrap「Forms」を参考に、シンプルですがこんな感じに作ってみました。

Bootstrap-フォーム

 

html

 

css

 

続いて、作成したフォームにjQuery Validation Engineを使用し入力チェック機能を追加してみる。

GitHubhttps://github.com/posabsolute/jQuery-Validation-Engine)から ZIP ファイルをダウンロードして解凍します。

解凍するとファイルがいろいろとありますが、使うのは以下です。

  • cssフォルダ内:「validationEngine.jquery.css
  • jsフォルダ内:「jquery.validationEngine.js
  • js/languagesフォルダ内:「jquery.validationEngine-ja.js

それぞれのファイルを環境に合わせて制作フォルダ内へ移動・コピーしておきます。

作成したhtmlへ上記ファイルを使うための記述をする。

さらに下記 script コード を html へ記述します。
(“#mail_form”) 部分を Bootstrap-Horizontal form で作成した<form> のid と合わせる。(今回の場合は id=”mail_form”)

jQuery Validation Engine の下準備は以上となる。

続いてフォームにclass名を追加していきます。

「お名前」「お問い合わせ内容」「ご用件」「利用規約に同意する」、それぞれの要素 class 名に validate[required] を追記。

「メールアドレス」の要素 class名に validate[required,custom[email]] を追記。

「メールアドレスの確認」の要素 class名に validate[equals[mail_address]] を追記。([mail_address]は照合する元のIDと一致させる。)

今回はここまでで、入力チェック「 jQuery Validation Engine 」の設定は終了。

エラーメッセージの表示位置をクラス名で変更するには以下の属性を追記します。

datapromptposition=“bottomRight”
datapromptposition=“topLeft”
datapromptposition=“topRight”
datapromptposition=“inline”

他にも「チェックボックス最低数、最高数」や「電話番号」「URL」などなどのチェックが出来る。いずれもクラス名を付けるだけの簡単な作業です。

詳しくは http://posabsolute.github.io/jQuery-Validation-Engine/# 

こちらの http://www.position-relative.net/creation/formValidator/ のデモサイトも確認です!

 

最終的なソースは以下のようになりました。(cssは前記のまま変更ありません。)

今回のデモサイトはこちら

送信はされませんので動作を確認してみてください。

Bootstrap-validation

cssファイルや日本語jsを変更すればデザインもカスタマイズできますね。

今回は以上です。

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL