How to show errors generated when validation fails using simple_form with remote:true

Question

trying to validate model's attributes after submitting form inside a modal with 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 responding to js and renders errors as follows:

  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

when submitting a form I get the following error error_screen_show

using: Rails 6.0.3.7 ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin19]

response:

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)

Answer 1

fixed by rendering :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