Bootstrapとvalidator.jsというプラグインを利用したBootStrapで作るバリデーションチェック機能付きフォームの作成方法です。
HTML5で作成するフォームですが、input要素にrequireプロパティーをつけた場合、エラーコメントが「このフィールドを入力してください」という固定文言が出ます。
今回紹介するプラグインでは入力にエラーが合った場合いのフィードバックコメントのアレンジもこのプラグインでは出来ます。
このプラグインはMITライセンスで使えます。
ただし、IE9以下の古いブラウザでは動作の保障がありませんので、スマホサイトなどのモダンブラウザで使用する事をお勧めします。
フィードバックコメントの設定方法 input要素に以下のプロパティーを追加するとフィードバックコメントの変更ができます。
data-required-error=”” | 項目が空の場合のコメント |
---|---|
data-pattern-error=”” | パターンの値と一致しない場合のコメント パターンは次のプロパティでっせてい出来ます。 pattern=”^[_A-z0-9]{1,}$” |
data-match-error=”” | データが一致しない場合のコメント |
data-error=”” | その他のエラーがあった場合のコメント |
サンプルデモページ
HTMLコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Validator validator.js サンプル</title> <link rel="stylesheet" href="../common/css/bootstrap.css"> <script src="../common/js/jquery-1.11.3.min.js"></script> <script src="validator.js"></script> <script src="../common/js/bootstrap.js"></script> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> .error{ color:red; } </style> </head> <body> <div class="page-header text-center"> <h1>Bootstrap Validator validator.js サンプル</h1> </div> <div class="container"> <form data-toggle="validator" role="form"> <div class="form-group has-feedback"> <label for="inputName" class="control-label"> <span class="label label-danger">必須項目</span> 名前 </label> <input type="text" class="form-control" id="inputName" placeholder="名前を入力" data-required-error="名前の入力は必須です" required> <span class="glyphicon form-control-feedback" aria-hidden="true"></span> <div class="help-block with-errors"></div> </div> <div class="form-group has-feedback"> <label for="inputTwitter" class="control-label"> <span class="label label-danger">必須項目</span> Twitterアカウント名 </label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" data-pattern-error="英数字以外の文字が入力されています" data-required-error="Twitterアカウントの入力は必須です" required> </div> <span class="glyphicon form-control-feedback" aria-hidden="true"></span> <div class="help-block with-errors">Twitterアカウント名を入力してください</div> </div> <div class="form-group has-feedback"> <label for="inputEmail" class="control-label"> <span class="label label-danger">必須項目</span> メールアドレス </label> <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="メールアドレスが正しく入力されておりません" data-required-error="メールアドレスの入力は必須です" required> <span class="glyphicon form-control-feedback" aria-hidden="true"></span> <div class="help-block with-errors"></div> </div> <div class="form-group"> <label for="inputPassword" class="control-label"> <span class="label label-danger">必須項目</span> パスワード </label> <div class="row"> <div class="form-group has-feedback col-sm-6"> <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="パスワードを入力" data-required-error="パスワードの入力は必須です" required> <div class="help-block">6文字以上で設定してください。</div> </div> <div class="form-group has-feedback col-sm-6"> <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-required-error="確認用パスワードの入力は必須です" data-match-error="パスワードが一致しません" placeholder="確認用パスワードを入力" required> <div class="help-block with-errors"></div> </div> </div> </div> <div class="form-group has-feedback"> <p>選択してください</p> <div class="radio"> <label> <input type="radio" name="underwear" required>ボクサー </label> </div> <div class="radio"> <label> <input type="radio" name="underwear" required>ブリーフ </label> </div> </div> <div class="form-group has-feedback"> <p>承認するにチェックを入れてください</p> <div class="checkbox"> <label> <input type="checkbox" id="terms" data-error="問題がなければ承認するにチェックを入れてください" required>承認する </label> <div class="help-block with-errors"></div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">送信</button> </div> </form> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="validator.min.js"></script> </body> </html>
ちょうどbootstrapp周りの手軽なバリデーション方法を探していました。参考にさせていただきました。
素晴らしい記事をありがとうございます。