[英]Validation errors not showing after I ajax a rails form
我正在使用 ajax-rails 来呈现我的表单并且验证停止工作。 当我单击提交应验证的空表单时,验证不会生效,并且后端日志显示它已发布空表单。 如果我不使用 ajax 它工作正常。 我不知道我错过了什么。
model
class ClockEntry < ApplicationRecord
belongs_to :user
validates :purpose, presence: true # I validated the attribute
end
索引.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 %>
新的.html.erb
<h1>New Clock Entry</h1>
<%= render 'form', clock_entry: @clock_entry %>
<%= link_to 'Back', clock_entries_path %>
新的.js.erb
$('#new-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")
创建.js.erb
$('#new-clock-entry form').remove();
$('#new-clock-entry a').show();
$('table#clock-entry tbody').append("<%= j render @clock_entry %>");
controller
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
评论部分的@arieljuod 对我解决这个问题很有帮助。 正如他首先提到的,我并不是要求我的格式在 create 方法的else
条件下format to respond to js
。 所以这就是我所做的:
controller 创建动作
将下面的行添加到 create 操作的else
条件中:
format.js { 渲染:新 }
所以我的 controller 动作变成:
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
表单时,您需要删除或隐藏已经存在的内容,并且 append 是一个包含错误消息的新表单。 所以我必须通过提供form tag to be hidden
在我的new.js.erb
中的表单标签来删除整个表单。 所以我将下面这一行添加到我的new.js.erb
文件中:
$('#new-clock-entry form').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")
所以新的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 %>")
我认为这对遇到同样问题的人来说应该很方便。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.