こんにちは！あっきー (IwswAkht) です！
フォーム入力の UI向上のためのツールチップの表示やフロント側でのバリデーションなどを行う方法を記事にしました。
よくある機能だと思いますし、フォームの最適化は問い合わせのコンバーション率と密接な関係性があるので覚えておいて損はないと思いますので参考にしていただければ幸いです！
それではまとめていきます。
完成イメージ
まずは完成イメージを Code Pen で確認してみてください。
See the Pen
gOOQjOd by 岩澤輝人 (@rmtgjoam)
on CodePen.
やっていることは主に以下3点です。
2. フォーカス時にツールチップで入力注意事項を表示
3. フォーカスが外れたときにバリデーションチェック
それぞれ説明していきます。
フォーカス時にプレースホルダを非表示
HTMLのインプットタグは placeholder属性で値を指定することで薄いフォントでその値が表示されますね。
これによりユーザに入力例を伝えられるため、入力形式に迷わず UI の向上が見込めます。
ですが、デフォルトですとユーザがインプットにフォーカスを当てても入力がされるまではプレースホルダは表示されてしまいます。人によってはプレースホルダがなくならないことで「ここに入力していいのかな？」と思う人もいることでしょう。
ですのでフォーカスがされたらプレースホルダは非表示になった方がユーザとしては入力が促せると思います。
フォーカスされたらプレースホルダを非表示にするのはCSSのみで実装することが可能です。
コードは以下になります。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>申込フォーム</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> </head> <body> <form> <br> <div class="form form-name"> <label>お名前 ：</label> <input class="tooltiper nameCheck" type="text" placeholder="田中 太郎"> </div> <br> <div class="form form-tel"> <label>電話番号：</label> <input class="tooltiper telCheck" type="text" placeholder="080-1234-5678"> </div> <br> <div class="form form-mail"> <label>メール ：</label> <input class="tooltiper mailCheck" type="text" placeholder="example@gmail.com"> </div> <br> <input type="submit" value="送信する"> </form> <script src="app.js"></script> </body> </html> |
index.html
|
1 2 3 4 5 |
//インプットにフォーカスされたらプレースホルダを非表示 input:focus::placeholder { color: transparent; transition: .2s; } |
とくに難しいことなく書いて通り inputの疑似クラス focusがされたら疑似要素の placeholderに color: transparentを適用させるということですね。
transition: .2s; はプレースホルダが非表示になるときに少しふわっと消えるようにしているだけなのであってもなくても動作には影響しません。
フォーカス時にツールチップで入力注意事項を表示
続いてフォーカス時にツールチップを表示させてみましょう。
ちなみに bootstrapでも似たことはできます。
余談ですが、僕は bootstrapでできるのを知らずクラス名で tooltipを使っててbootstrapを使ってる画面に適用させようとしたら画面に表示されなくてなんで？ってなって気づきましたw
クラス名は被らないようにすることを意識しないとこういうところで時間かかったりもしますので気を付けた方がいいですね。。
では、話を戻してコードを見ていきましょう。
先ほどのHTMLファイルのインプットの下に span でツールチップの文言を追加しましょう。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--中略--> <label>お名前 ：</label> <input class="tooltiper nameCheck" type="text" placeholder="田中 太郎"> <span class="tooltipMsg">名字と名前の間はスペースをあけてください</span><!--追加--> <!--中略--> <label>電話番号：</label> <input class="tooltiper telCheck" type="text" placeholder="080-1234-5678"> <span class="tooltipMsg">必ず入力してください</span><!--追加--> <!--中略--> <label>メール ：</label> <input class="tooltiper mailCheck" type="text" placeholder="example@gmail.com"> <span class="tooltipMsg">メールでの連絡をご希望の方は記入してください</span><!--追加--> |
これだと普通に文字が表示されてしまいますので、CSSで見た目を整えたら初期値で非表示にしておきましょう。
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//ボックスの大きさを設定 .form { width: 300px; } //ツールチップのデザイン form span.tooltipMsg { position: relative; display: inline-block; margin: 1.2em 0; padding: 0px 10px; min-width: 120px; max-width: 100%; color: white; font-size: 12px; background: rgb(120, 120, 120); border-radius: 5px; box-shadow: 0px 1px 2px 0 rgb(120, 120, 120); z-index: 10000; display: none; } form span.tooltipMsg:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 8px solid transparent; border-top: 8px solid rgb(120, 120, 120); } //ツールチップの表示位置を調整 .form-name, .form-tel, .form-mail { position: relative; } .form-name span.tooltipMsg { position: absolute; left: 10%; bottom: 75%; } .form-tel span.tooltipMsg { position: absolute; left: 30%; bottom: 75%; } .form-mail span.tooltipMsg { position: absolute; left: 5%; bottom: 75%; } |
続いて、jsでフォーカスされたらツールチップを表示して、フォーカスが外れたらツールチップを非表示にするよう制御しましょう。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//インプットエリアをループ $('form .form').each(function() { var formVal = $(this) //フォーカスされたらツールチップを表示 formVal.find('.tooltiper').focus(function() { formVal.find('.tooltipMsg').fadeIn(200) }) }) //フォーカスが外れたらツールチップを非表示 $('.tooltiper').blur(function() { $('form').find('.tooltipMsg').fadeOut(200) }) |
フォーカスが外れたときにバリデーションチェック
最後にフォーカスが外れたらバリデーションのチェックを行いましょう。
バリデーションは送信時に行うシチュエーションの方が多いイメージですが、フロント側で入力時に行うことでユーザに入力ミスした時に二度手間でストレスを与えることがなくなります。
ただなんでもフロントでやりすぎると逆にうざいと思われてしまうのでバランスが大事ですね。
インプットの下に赤文字でエラーメッセージを表示してインプットを赤枠で囲むようにしてみました。
コードは以下になります。
まずはCSSでエラーメッセージの色と表示位置を少しだけ調整しておきましょう。
style.css
|
1 2 3 4 5 6 7 8 9 10 |
/* 中略・・ */ //追加 .alert__name, .alert__tel, .alert__mail { font-size: 12px; color: rgb(219, 46, 48); margin-left: 75px; } |
続いてjsファイルです。
フォーカスが外れたときにバリデーションチェックするのでツールチップがフェードアウトされる前に実行すればよさそうですね。
以下の編集をしてください。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* 中略・・ */ $('.tooltiper').blur(function() { validation_check($(this)) //追加 $('form').find('.tooltipMsg').fadeOut(200) }) //追加 function validation_check(e) { if($("[class$='Check']")[0] === e[0]) { name_checker(e) } else if($("[class$='Check']")[1] === e[0]) { tel_checker(e) } else if($("[class$='Check']")[2] === e[0]) { mail_checker(e) } } function name_checker(e) { if(e.val() == '') { create_errmsg(e, 'name', ' 名前が入力されてません') } else { $(".alert__name").prev().css('border-color', '#cccccc') $(".alert__name").remove() } } function tel_checker(e) { var tel = e.val().replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi,'') if(!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) { create_errmsg(e, 'tel', ' 電話番号が正しくありません') } else { $(".alert__tel").prev().css('border-color', '#cccccc') $(".alert__tel").remove() } } function mail_checker(e) { if(e.val().match(/.+@.+\..+/)==null) { create_errmsg(e, 'mail', ' メールアドレスが正しくありません') } else { $(".alert__mail").prev().css('border-color', '#cccccc') $(".alert__mail").remove() } } function create_errmsg(obj, key, msg) { if(!($('.alert__' + key).length)) { var html = '<div class="alert__' + key + '">' + msg + '</div>' obj.css('border-color', 'rgb(219, 46, 48)') obj.after(html) } } |
簡単に説明します。
fadeout の前にバリデーションチェックの関数である validation_check を発火させます。
引数で渡されたオブジェクトとワイルドカード $("[class$='Check']"の ○○Checkに一致するクラス名のオブジェクトに応じて実行する関数を制御し、各々以下のようなバリデーションを行います。
1. nam e_checker→インプットが空の場合エラーメッセージ作成の create_errmsg を発火
2. tel_checker→10桁、11桁の数値でない場合エラーメッセージ作成の create_errmsg を発火
3. mail_checker→1文字以上+@があり、@以降に . がない場合 create_errmsg を発火
引数に inputのオブジェクト(obj)、クラス名のキーワード(key)、エラーメッセージ(msg)を渡しalert__ + key のクラス名がない場合エラーメッセージ用の要素を生成し inputオブジェクトの後ろに書き出す。
以上で完了になります。お疲れ様でした！
さいごに
さいごまで読んでいただきありがとうございます。
フォームのバリデーションはよくあると思いますので少しでも参考になればと思います！
コードに間違いなどありましたら教えていただければと思います。
この記事を気に入っていただけましたらTwitterでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。