0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【初心者向け】Railsのビューでエラーが表示されない・レイアウトが崩れる

Posted at

###■環境
・Windows10(64bit)
・Ruby 2.7.4
・Rails 5.2.6
・devise 4.8.0
###■Railsのビューでエラーが表示されない
####状況
Railsアプリケーションにgem「devise」をインストールし、ビューは「users」ディレクトリ内に格納するようにした。
(デフォルトの app\views\devise ではなく app\views\users に)
そして、ビューのフォームを「form_for」から「form_with」に書き換えるなどカスタマイズした後から、ユーザ情報更新時などにビューでエラーメッセージが何も表示されなくなった。
####原因
1)「form_with」内に「local: true」を追加していなかった。
2)renderメソッドでのリソース指定を修正していなかった。
####対処
1)local: trueの追加

app\views\users\registrations\edit.html.erb
#修正前
<%= form_with(model: resource, scope: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
#修正後
<%= form_with(model: resource, scope: resource_name, url: registration_path(resource_name), html: { method: :put }, local: true) do |f| %>

2)リソース指定の修正(resource: → model:)

app\views\users\registrations\edit.html.erb
#修正前
<%= render "users/shared/error_messages", resource: resource %>
#修正後
<%= render "users/shared/error_messages", model: resource %>

####参考情報
【Rails】form_with/form_forについて【入門】
【Rails 5】(新) form_with と (旧) form_tag, form_for の違い
【Rails】deviseのビューのform_forをform_withに置き換える
###■ビューのレイアウトがエラー発生項目だけ崩れる
####状況
ユーザ情報更新画面には名前・emailアドレス・パスワードなどの入力フォームがある。そして、パスワードを要件を満たさずに設定しようとすると、ビューにエラーメッセージ自体は正常に表示される。
しかし、パスワード欄だけ入力フォームのレイアウトが崩れる。
####原因
ビューのエラーメッセージ箇所に、クラス「field_with_errors」のdivタグが自動挿入されている。
####対処
クラス「field_with_errors」へのスタイル適用

CSSでクラス「field_with_errors」を定義すればよい。
以下はSCSSを利用している場合の対処例。

app\assets\stylesheets\application.scss
	.field_with_errors {
	  display: contents;
	}

####参考情報
Railsのエラーメッセージでフォームのレイアウトが崩れる

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?