RailsGitMySQLCUIHerokuSalesforceAWSAuth0エンジニア転職SEOアフィリエイトプロフィールプライバシーサイトマップこのブログは未経験からのエンジニア転職やプログラミングの勉強方法などを発信する、現役エンジニアによるエンジニアのためのトータル技術ブログです。ブログとご一緒にSNSのフォローもよろしくお願いします。UI向上のためのツールチップの表示やフロント側でのバリデーションなどを行う方法を記事にしました。ある機能だと思いますし、フォームの最適化は問い合わせのコンバーション率と密接な関係性があるので覚えておいて損はないと思いますので参考にしていただければ幸いです!それではまとめていきます。確認してみてください。CodePen.やっていることは主に以下3点です。フォーカスが外れたときにバリデーションチェックそれぞれ説明していきます。placeholder属性で値を指定することで薄いフォントでその値が表示されますね。デフォルトですとユーザがインプットにフォーカスを当てても入力がされるまではプレースホルダは表示されてしまいます。人によってはプレースホルダがなくならないことで「ここに入力していいのかな?」と思う人もいることでしょう。フォーカスがされたらプレースホルダは非表示になった方がユーザとしては入力が促せると思います。フォーカスされたらプレースホルダを非表示にするのはCSSのみで実装することが可能です。コードは以下になります。transparentを適用させるということですね。プレースホルダが非表示になるときに少しふわっと消えるようにしているだけなのであってもなくても動作には影響しません。続いてフォーカス時にツールチップを表示させてみましょう。bootstrapでも似たことはできます。ツールチップ~Bootstrap4移行ガイドCSS3を使ってCSS3とアニメーション用のカスタムBootstrapツールチップを追加し、ローカルタイトルストレージ用のデータ属性を追加するための解説と例。tooltipを使っててbootstrapを使ってる画面に適用させようとしたら画面に表示されなくてなんで?ってなって気づきましたwクラス名は被らないようにすることを意識しないとこういうところで時間かかったりもしますので気を付けた方がいいですね。話を戻してコードを見ていきましょう。ツールチップの文言を追加しましょう。class="tooltipMsg">メールでの連絡をご希望の方は記入してください</span><!--追加-->これだと普通に文字が表示されてしまいますので、CSSで見た目を整えたら初期値で非表示にしておきましょう。75%;}続いて、jsでフォーカスされたらツールチップを表示して、フォーカスが外れたらツールチップを非表示にするよう制御しましょう。{$('form').find('.tooltipMsg').fadeOut(200)})フォーカスが外れたときにバリデーションチェック最後にフォーカスが外れたらバリデーションのチェックを行いましょう。バリデーションは送信時に行うシチュエーションの方が多いイメージですが、フロント側で入力時に行うことでユーザに入力ミスした時に二度手間でストレスを与えることがなくなります。なんでもフロントでやりすぎると逆にうざいと思われてしまうのでバランスが大事ですね。インプットの下に赤文字でエラーメッセージを表示してインプットを赤枠で囲むようにしてみました。コードは以下になります。CSSでエラーメッセージの色と表示位置を少しだけ調整しておきましょう。75px;}続いてjsファイルです。フォーカスが外れたときにバリデーションチェックするのでツールチップがフェードアウトされる前に実行すればよさそうですね。以下の編集をしてください。48)')obj.after(html)}}簡単に説明します。○○Checkに一致するクラス名のオブジェクトに応じて実行する関数を制御し、各々以下のようなバリデーションを行います。inputオブジェクトの後ろに書き出す。以上で完了になります。お疲れ様でした!さいごにさいごまで読んでいただきありがとうございます。フォームのバリデーションはよくあると思いますので少しでも参考になればと思います!コードに間違いなどありましたら教えていただければと思います。この記事を気に入っていただけましたらTwitterでもプログラミングに関してのツイートをリアルタイムでしていますのでご一緒にフォローもお願いします。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。受けたら悲惨な結果でした。私はオワコンエンジニ...2019.07.10つぶやき現役セキュリティエンジニアが語る。いいことがある裏では必ず悪い人が動くもので悲しいです。...2018.12.18つぶやき【Excel/VBA】連想配列×ファイルシステムオブジェクトで複数ファイルを自由に操作する方法Excel/VBAの基本操作方法。サンプルファイルあり。連想配列、ファイルシステムオブジェクト、引数、戻り値、その他IF文、For文基本的な文法が豊富に盛り込まれた内容になってます。勉強しても筋トレしてもいつも中途半端にやめてしまう。やって続けたらいいか全然わかりません。こんにちは、あっきー(IwswAkht)です。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。2020.11.10【簡単】アマゾンアフィリエイトリンクのつくり方【ヨメレバ・カエレバではないよ】2020.08.30。