このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

【jQuery】ツールチップ表示、フロントの入力チェックでフォームの最適化

つぶやき
スポンサーリンク

こんにちは!あっきー (IwswAkht) です!

フォーム入力の UI向上のためのツールチップの表示やフロント側でのバリデーションなどを行う方法を記事にしました。

よくある機能だと思いますし、フォームの最適化は問い合わせのコンバーション率と密接な関係性があるので覚えておいて損はないと思いますので参考にしていただければ幸いです!

 

それではまとめていきます。

 

スポンサーリンク

完成イメージ

 

まずは完成イメージを Code Pen で確認してみてください。

 

See the Pen
gOOQjOd
by 岩澤輝人 (@rmtgjoam)
on CodePen.

 

やっていることは主に以下3点です。

 

1. フォーカス時にプレースホルダを非表示
2. フォーカス時にツールチップで入力注意事項を表示
3. フォーカスが外れたときにバリデーションチェック

 

それぞれ説明していきます。

 

フォーカス時にプレースホルダを非表示

 

HTMLのインプットタグは placeholder属性で値を指定することで薄いフォントでその値が表示されますね。

 

<input placeholder>-HTML5タグリファレンス
HTML5のタグ解説

 

これによりユーザに入力例を伝えられるため、入力形式に迷わず UI の向上が見込めます。

ですが、デフォルトですとユーザがインプットにフォーカスを当てても入力がされるまではプレースホルダは表示されてしまいます。人によってはプレースホルダがなくならないことで「ここに入力していいのかな?」と思う人もいることでしょう。

ですのでフォーカスがされたらプレースホルダは非表示になった方がユーザとしては入力が促せると思います。

フォーカスされたらプレースホルダを非表示にするのはCSSのみで実装することが可能です。

コードは以下になります。

 

index.html

 

index.html

 

とくに難しいことなく書いて通り inputの疑似クラス focusがされたら疑似要素の placeholderに color: transparentを適用させるということですね。

transition: .2s; はプレースホルダが非表示になるときに少しふわっと消えるようにしているだけなのであってもなくても動作には影響しません。

 

フォーカス時にツールチップで入力注意事項を表示

 

続いてフォーカス時にツールチップを表示させてみましょう。

ちなみに bootstrapでも似たことはできます。

 

ツールチップ~Bootstrap4移行ガイド
CSS3を使ってCSS3とアニメーション用のカスタムBootstrapツールチップを追加し、ローカルタイトルストレージ用のデータ属性を追加するための解説と例。

 

余談ですが、僕は bootstrapでできるのを知らずクラス名で tooltipを使っててbootstrapを使ってる画面に適用させようとしたら画面に表示されなくてなんで?ってなって気づきましたw

クラス名は被らないようにすることを意識しないとこういうところで時間かかったりもしますので気を付けた方がいいですね。。

 

では、話を戻してコードを見ていきましょう。

先ほどのHTMLファイルのインプットの下に span でツールチップの文言を追加しましょう。

 

index.html

 

これだと普通に文字が表示されてしまいますので、CSSで見た目を整えたら初期値で非表示にしておきましょう。

 

style.css

 

続いて、jsでフォーカスされたらツールチップを表示して、フォーカスが外れたらツールチップを非表示にするよう制御しましょう。

 

app.js

 

 

フォーカスが外れたときにバリデーションチェック

 

最後にフォーカスが外れたらバリデーションのチェックを行いましょう。

バリデーションは送信時に行うシチュエーションの方が多いイメージですが、フロント側で入力時に行うことでユーザに入力ミスした時に二度手間でストレスを与えることがなくなります。

ただなんでもフロントでやりすぎると逆にうざいと思われてしまうのでバランスが大事ですね。

インプットの下に赤文字でエラーメッセージを表示してインプットを赤枠で囲むようにしてみました。

コードは以下になります。

まずはCSSでエラーメッセージの色と表示位置を少しだけ調整しておきましょう。

 

style.css

 

続いてjsファイルです。

フォーカスが外れたときにバリデーションチェックするのでツールチップがフェードアウトされる前に実行すればよさそうですね。

以下の編集をしてください。

 

app.js

 

簡単に説明します。

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でもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
つぶやき
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき