在我 ajax 一个 rails 表单后没有显示验证错误答案

【问题标题】：Validation errors not showing after I ajax a rails form在我 ajax 一个 rails 表单后没有显示验证错误
【发布时间】：2019-09-26 18:26:58
【问题描述】：

我正在使用 ajax-rails 来呈现我的表单并且验证停止工作。当我单击提交应验证的空白时，验证不会生效，并且后端日志显示它已发布空表单。如果我不使用 ajax 它工作正常。我不知道我错过了什么。

型号

class ClockEntry < ApplicationRecord
  belongs_to :user

  validates :purpose, presence: true # I validated the attribute
end

index.html.erb

<div class="container" id="new-clock-entry">
  <%= link_to 'New Clock Entry', new_clock_entry_path, remote: true, class: 'btn btn-primary btn-sm' %>
</div>

_form.html.erb

<%= simple_form_for clock_entry, remote: true do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :purpose %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, class: 'btn btn-primary btn-block btn-lg' %>
  </div>
<% end %>

new.html.erb

<h1>New Clock Entry</h1>

<%= render 'form', clock_entry: @clock_entry %>

<%= link_to 'Back', clock_entries_path %>

new.js.erb

$('#new-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

create.js.erb

$('#new-clock-entry form').remove();
$('#new-clock-entry a').show();
$('table#clock-entry tbody').append("<%= j render @clock_entry %>");

控制器

def new
  @clock_entry = ClockEntry.new
end

def create
    @clock_entry = current_user.clock_entries.new(clock_entry_params)
    @clock_entry.set_time_in

    respond_to do |format|
      if @clock_entry.save
        format.js { redirect_to root_path, notice: 'Clock entry was successfully created.' }
        format.html { redirect_to @clock_entry, notice: 'Clock entry was successfully created.' }
        format.json { render :show, status: :created, location: @clock_entry }
      else
        format.html { render :new }
        format.json { render json: @clock_entry.errors, status: :unprocessable_entity }
      end
    end
  end

【问题讨论】：

@clock_entry.save 失败时，else 上没有format.js 行。您没有提示找不到视图吗？
@arieljuod 哇真的。但是当我添加它时，它会在 ajax 表单下呈现一个新的 ajax 表单，而不是在表单上呈现。现在我有双重表格。
我猜你是在你的 javascript 上使用“append”而不删除旧表单。
你能提供一个答案吗？这将揭示更多的光。用 Ajax 做的不是很好
我不确定您当前的视图和当前的 ajax 响应是什么。您必须定位您不想要的元素，调用“remove()”，然后附加新表单。

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-6

【解决方案1】：

cmets 部分的@arieljuod 对我解决这个问题很有帮助。正如他首先提到的，我不是在 create 方法的else 条件下询问我的format to respond to js。所以这就是我所做的：

控制器创建动作

在创建操作的else 条件中添加以下行：

format.js { 渲染：新 }

所以我的控制器动作变成：

def create
    @clock_entry = current_user.clock_entries.new(clock_entry_params)
    @clock_entry.set_time_in

    respond_to do |format|
      if @clock_entry.save
        format.html { redirect_to @clock_entry, notice: 'Clock entry was successfully created.' }
        format.js { redirect_to root_path, notice: 'Clock entry was successfully created.' }
        format.json { render :show, status: :created, location: @clock_entry }
      else
        format.js { render :new } # Added this...
        format.html { render :new }
        format.json { render json: @clock_entry.errors, status: :unprocessable_entity }
      end
    end
  end

new.js.erb 文件

然后在new.js.erb 文件中，在呈现:new 表单时，您需要删除或隐藏已经存在的内容并附加一个包含错误消息的新表单。所以我不得不通过在我的new.js.erb 中提供form tag to be hidden 来删除整个表单。所以我将下面这一行添加到我的new.js.erb 文件中：

$('#new-clock-entry form').hide().parent().append("")

所以新的new.js.erb 文件现在变为：

$('#new-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")
$('#new-clock-entry form').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

我认为这对遇到同样问题的人来说应该很方便。

【讨论】：