Rails 错误消息未出现在网站上,但显示在 Chrome DevTools Network Preview 中

问题描述

当字段未通过验证时,我试图在我的 Rails 应用程序中创建模型的新实例时显示错误消息。出于某种原因,这些错误实际上从未像应有的那样显示在网站上的字段旁边。 但是,错误出现在 Chrome DevTools 的“网络”选项卡的“预览”部分。因此错误生成正确。在终端中,它说 new.html.erb 已呈现,但我认为实际上并非如此?任何帮助将不胜感激-我在网上找不到太多关于此的信息。如果有帮助,我将使用 Tailwind CSS 来设计前端样式。

这是我的代码

occasion.rb

class Occasion < ApplicationRecord
    belongs_to :user
    has_many :registries
    has_many :charities,:through => :registries
    
    validates :occasion_name,presence: true
    validates :occasion_date,presence: true
    validates :url,presence: true,format: { without: /\s/ },uniqueness: true
    validates_uniqueness_of :user_id

end

occasions_controller.rb

class OccasionsController < ApplicationController
  load_and_authorize_resource only: [:new,:create,:edit,:update,:destroy]

  def index
    @occasions = Occasion.all
  end
  
  def show
    @occasion = Occasion.where(url: params[:url]).first
  end
  
  def new
    @occasion = Occasion.new
  end

  def create
    @occasion = Occasion.new(occasion_params)
    @occasion.user = current_user

    if @occasion.save
      respond_to do |format|
        format.html { redirect_to new_registry_path }
        format.js   { render :js => "window.location='#{ new_registry_path }'" }
      end
    else
      render :new
    end
  end

  def edit
    @occasion = Occasion.find(params[:id])
  end

  def update
    @occasion = Occasion.find(params[:id])

    if @occasion.update(occasion_params)
      redirect_to @occasion
      return
    else
      render :edit
    end
  end

  def destroy
    @occasion = Occasion.find(params[:id])
    @occasion.destroy

    redirect_to occasions_path
  end

  private
    def occasion_params
      params.require(:occasion).permit(:user_id,:occasion_name,:occasion_date,:url)
    end
    
  # user authentication is not required for show
  skip_before_action :authenticate_user!,:only => [:show]


end

new.html.erb

<%= form_with model: @occasion do |form| %>

    <div class="text-center">
        <%= form.label :occasion_name,"Occasion Name",class: "text-red-400 font-semibold px-8" %><br>
        <%= form.text_field :occasion_name,class: "rounded w-2/5" %>
        <% @occasion.errors.full_messages_for(:occasion_name).each do |message| %>
        <div><%= message %></div>
        <% end %>
    </div>

    <div class="text-center py-2">
        <%= form.label :occasion_date,"Occasion Date",class: "text-red-400 font-semibold px-8" %><br>
        <%= form.date_field :occasion_date,type: "date",class: "rounded" %>
        <% @occasion.errors.full_messages_for(:occasion_date).each do |message| %>
        <div><%= message %></div>
        <% end %>
    </div>

    <div class="text-center py-2">
        <%= form.label :url,'URL',class: "text-red-400 font-semibold px-8" %><br>
        <%= form.text_field :url,class: "rounded" %>
        <% @occasion.errors.full_messages_for(:url).each do |message| %>
        <div><%= message %></div>
        <% end %>
        <em><div class="text-sm">domainname.com/yourURLhere</div></em>
    </div>

    <div class="text-center py-2">
        <%= form.submit occasion.persisted? ? 'Update' : 'Save',class: "rounded-full bg-red-400 text-white px-3" %>
    </div>

<% end %>

解决方法

从提供的信息来看,表单似乎是作为 AJAX 请求提交的。由于您没有将 local: false 传递给 form_with 调用,因此必须将配置设置为默认使用 AJAX 表单提交。

来自docs

:local - 默认情况下,表单通过典型的 HTTP 请求提交。使用 local: false 启用远程和不显眼的 XHR 提交。默认情况下,可以通过设置 config.action_view.form_with_generates_remote_forms = true 来启用远程表单。

传递 local: true 以通过普通 HTTP 请求提交请求。

<%= form_with model: @occasion,local: true do |form| %>
  <%#= ... %>
<% end %>