お問い合わせや登録ページ等の入力が必要な項目をリアルタイムでチェックを行い、ユーザービリティの向上ができるLIVEチェックバリデーター「BootstrapValidator」の実装方法を紹介。
お問い合わせや、登録ページ等の入力の際、半角全角のチェックや禁止文字の入力、確認用アドレスやパスワードの一致の確認など、入力しているその場でわかれば、エラーに対して離脱する人を防ぐことができるかもしれません。
この記事では「BootstrapValidator」というライブラリーを紹介します。
ですので、ブートストラップを使って構築しているサイトに適しています。
なぜ、ブートストラップなの?って、ブートストラップのサイト用のバリデーターを探してたら、たまたまブートストラップのバリデーターがあったからです!!
実装準備
以下を、head内に追加。
3行目は作成するファイルになるので、ディレクトリは任意の場所を記載してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="○○○/js/bootstrapValidator.js"></script>
cssは、ブートストラップのデザインで表示させます。
※上記がデザイン表示イメージです。
html
<form id="form01">
<div class="form-group">
<label for="name">お名前</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label for="mail">メールアドレス</label>
<input type="text" class="form-control" name="mail" />
</div>
<div class="form-group">
<label for="mailconfirmed">メールアドレス(確認用)</label>
<input type="text" class="form-control" name="mailconfirmed" />
</div>
<button type="submit">SUBMIT!!</button>
</form>
必要なのは、【form-group】というclassの中に各入力項目を入れる事と、
inputタグやselectタグに【form-control】というclassを入れてください。
formのidは好きなものにしてください。
JavaScript
$('#form01').bootstrapValidator({
message: '内容を入力してください。',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '名前は必須です'
},
stringLength: {
min: 2,
max: 12,
message: '2文字以上で12文字以内でお願いします。'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '半角英数字で入力してください'
}
},
mail: {
validators: {
notEmpty: {
message: 'メールは必須です'
},
emailAddress: {
message: 'メールアドレスをお確かめください'
}
},
mailconfirmed: {
validators: {
notEmpty: {
message: 'メール(確認用)は必須です'
},
emailAddress: {
message: 'メールアドレスをお確かめください'
},
identical: {
field: 'mail',
message: 'メールアドレスが一致しません'
}
}
}
});
ほとんど、このJSでバリデーターを制御するイメージです。
【message】というところで、表示させるエラーテキストを変更できますが、何も入れなければデフォルトでエラーテキストが英文で表示されます。
【emailAddress】を入れるとメールアドレス(@マークの入った)の文字列に制限されます。
【url】にすると、http://~からはじまる文字列だけに制限されます。
【regexp】項目で文字を入力する文字を制限できます。
以下の様に変更すると半角英数記号のみで空文字も大丈夫です。
複雑なパスワードの入力などの時にいいかもしれません。
regexp: /^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/,
チェックするタイミングを変えたりなど、その他にもオプションがあります。
フォーカスが外れたタイミングでチェックさせる場合は、以下の2行目のようにtrigger=’blur’を入れてください。
name: {
trigger='blur',
validators: {
notEmpty: {
message: '名前は必須です'
}
},
その他のオプションは本家サイトで確認してください!ww
入力不備でエラー箇所へスクロール
$('#form01 button').click(function() {
$('#form01').bootstrapValidator('validate');
var errorPos = ($('.has-error:first').get(0).offsetTop && $('.has-error:first').offset().top) || 0;
$('html,body').animate({scrollTop: errorPos}, 'slow');
});
サブミットボタンを押したタイミングで再度フォームをバリデートし、エラー箇所にスクロール。
デフォルトでもスクロールはしませんが、エラー箇所に移動してくれます。
何も入力してない状態でサブミットを押したときに「おいおい、ちょ待てよ、まだ入力してないじゃないか」みたいな感じです。
まとめ
ユーザービリティの向上ができるLIVEチェックバリデーター。
ブートストラップありきではありますが、デザインなど視認性の高い緑のOKチェックと赤の×マーク。
javascriptの設定は面倒なところもありますが、それさえ設定できればさほど時間をかけずにLIVEチェックバリデーターを設置できます。
ちょうど入力項目のバリデーターの設置を考えてて、なおかつブートストラップを使ってる人は試してみてください。
コメント