Bootstrapの入力フォームでjQuery Validation Pluginを連携させるサンプル
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技術者の調査レポート
- 作者: 槙俊明
- 出版社/メーカー: 工学社
- 発売日: 2013/11
- メディア: 単行本
- この商品を含むブログを見る
