読者です 読者をやめる 読者になる 読者になる

サラリーマンIT技術者の調査レポート

日々の業務で気付いた当たり障りのない技術的なあれこれを綴ります。

Bootstrapの入力フォームでjQuery Validation Pluginを連携させるサンプル

JavaScript jQuery Bootstrap

Twitter Bootstrap の入力フォームで jQuery Validation Plugin を簡単に使う方法がわかったので、サンプルコードを載せておきます。

実行結果

実行イメージはこちらで確認できます。

jQuery-Validation-Plugin Bootstrap 連携サンプル 実行結果

サンプルコード

jquery.validate.bootstrap3.js を適当にコピーして<script src="...">で取り込んでおけば、入力フォームに対して自動的にValidatorを適用します。 なので、HTMLファイルにJavaScriptを記述する必要はありません。

jQuery-Validation-Plugin Bootstrap 連携サンプル

制限事項

  • ページ中のすべてのフォームにValidationが適用されます(のハズ)
  • 入力項目(input)は個別に<div class="form-group">でグループ化しておく必要があります

これ以外は特に制限事項はありません。通常のBootstrapやjQuery Validation Pluginの流儀にしたがってHTMLやjsを作成できます。

こちらもどうぞ

jQuery Validation Pluginのメッセージを日本語化する - サラリーマンIT技術者の調査レポート

jQuery Validation PluginとBootstrap3.1のform-control-feedbackを使ったサンプル - サラリーマンIT技術者の調査レポート

はじめてのBootstrap (I・O BOOKS)

はじめてのBootstrap (I・O BOOKS)