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=”” | その他のエラーがあった場合のコメント |
サンプルデモページ
ＨＴＭＬコード
<!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周りの手軽なバリデーション方法を探していました。参考にさせていただきました。
素晴らしい記事をありがとうございます。