【Rails6】新・JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例 - Qiita

※2022年から技術系の記事は個人ブログに投稿しております。ぜひこちらもご覧ください→yamaday0u Blog 以前、【Rails6】JavaScriptによる「入力フォームの内容のリアルタイムチェック機能」の実装例という記事で、入力フォームのリアルタイムチェック機能の実装方法を紹介しましたが、この実装方法には以下の問題がありました。 エラーメッセージのタグをhiddenで隠しているので、フォームの中に不自然な空白がある 複数のタイプのエラーメッセージを表示しようとすると空白がさらに大きくなってしまう 今回はこれを改善し、しかもパワーアップしました。 前回と同様にjQueryのようなライブラリは使用せず、そのままのJavaScriptで実装したことが今回もポイントです。 実行環境 Rails 6.0.3.6 動作確認 今回のリアルタイムチェック機能の仕様は以下の通りです。 入力された値