如何使用带有 remote:true 的 simple_form 显示验证失败时生成的错误

Posted 2023-02-15

【中文标题】如何使用带有 remote:true 的 simple_form 显示验证失败时生成的错误

【英文标题】：How to show errors generated when validation fails using simple_form with remote:true

【发布时间】：2021-07-28 17:13:08

【问题描述】：

在带有 remote: true

的模态框内提交表单后尝试验证模型的属性

<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    
        <%= simple_form_for(order, wrapper: :horizontal_form,
          wrapper_mappings: 
            boolean:       :horizontal_boolean,
            check_boxes:   :horizontal_collection,
            date:          :horizontal_multi_select,
            datetime:      :horizontal_multi_select,
            file:          :horizontal_file,
            radio_buttons: :horizontal_collection,
            range:         :horizontal_range,
            time:          :horizontal_multi_select
          , 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 :customerName %>
            <%= f.input :customerAddress %>
            <%= f.input :customerEmail %>
            <%= f.input :customerPhoneNumber %>
            <%= f.input :restaurantName %>
            <%= f.input :restaurantAddress %>
            <%= f.input :expectedPickupTime %>
            <%= f.input :expectedDeliveyTime %>
            <%= f.input :deliveryInstruction %>
            <%= f.input :paymentMethod %>
            <%= f.input :deliveryFee %>
            <%= f.association :employee %>
          </div>

          <div class="form-actions">
            <%= f.button :submit %>
          </div>
        <% end %>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

orders_controller.rb 响应js并渲染错误如下：

  def create
@order = Order.new(order_params)

respond_to do |format|
  if @order.save
    format.html  redirect_to @order, notice: 'Order was successfully created.' 
    format.json  render :show, status: :created, location: @order 
    format.js  render :show, status: :created, location: @order 
  else
    format.html  render :new 
    format.json  render json: @order.errors, status: :unprocessable_entity 
    format.js    render json: @order.errors, status: :unprocessable_entity 
  end
end


end

提交表单时出现以下错误 error_screen_show

使用： 导轨 6.0.3.7 ruby 2.7.1p83（2020-03-31 修订版 a0c7c23c9c）[x86_64-darwin19]

回复：

Started POST "/orders" for ::1 at 2021-05-06 14:25:06 +0300
Processing by OrdersController#create as JS
  Parameters: "order"=>"customerName"=>"", "customerAddress"=>"", "customerEmail"=>"", "customerPhoneNumber"=>"", "restaurantName"=>"", "restaurantAddress"=>"", "expectedPickupTime"=>"15", "expectedDeliveyTime"=>"25", "deliveryInstruction"=>"", "paymentMethod"=>"", "deliveryFee"=>"", "employee_id"=>"", "commit"=>"Create Order"
Completed 422 Unprocessable Entity in 2ms (Views: 0.1ms | ActiveRecord: 0.0ms | Allocations: 1749)

【问题讨论】：

你能显示响应中返回的内容吗？响应正文

完成，更新问题。

该错误是因为您返回的是 json 而不是 js 响应，因此当 js 尝试解析响应时，它不会将其识别为有效的 js 代码。您可以做的是在您的页面中添加一个 div 以显示错误，该 div 最初将为空，然后在出现错误时呈现一个 js 部分，它将填充您的错误 div。

那是请求正文而不是响应正文

【参考方案1】：

通过渲染修复 :new on js

  def create
    @order = Order.new(order_params)

    respond_to do |format|
      if @order.save
        format.html  redirect_to @order, notice: 'Order was successfully created.' 
        format.json  render :show, status: :created, location: @order 
        format.js  render :show, status: :created, location: @order 
      else
        format.html  render :new 
        format.json  render json: @order.errors, status: :unprocessable_entity 
        format.js    render :new 
      end
    end
  end

【讨论】：

你有 .new.js / new,js.erb 文件吗？