带有 remote: true 的 form_for 中的内联错误消息

Question

我有一个模态表单，如下所示：

<%= form_for (@change_office_address_), remote: true, format: :json, html: { class: :contact_form } do |f| %>
          <div id="error_explanation" style='display:none;' class="bg-danger text-danger alert fade in alert-danger alert-dismissable errors">
            <ul>
              <% if @change_office_address_.errors.any? %>
                <% @change_office_address_.errors.full_messages.each do |msg| %>
                  <li><%= msg %></li>
                <% end %>
              <% end %>
            </ul>
          </div>
          <%= f.hidden_field :city_id, value: @office.city.id %>
          <%= f.hidden_field :office_id, value: @office.id %>
          <%= f.hidden_field :insurer_id, value: @office.insurer.id %>
          <%= f.text_field :name, placeholder: 'Name', class: 'form-control' %>

          <br>
          <%= f.text_field :email, placeholder: 'e-mail', class: 'form-control' %> <br>
          <%= f.label :city_name, 'City' %>
          <%= f.text_field :city_name, class: 'form-control', value: @office.city.name.mb_chars.titleize, readonly: true %>
          <br>
          <%= f.label :insurer_name, 'Insurer' %>
          <%= f.text_field :insurer_name, class: 'form-control', value: @office.insurer.short_name, readonly: true %>
          <br>
          <%= f.label :office_name, 'Insurer\'s office address' %>
          <%= f.text_field :office_name, class: 'form-control', value: @office.address, readonly: true %>
          <br>
          <%= f.text_field :edit_office_address, placeholder: 'New address', class: 'form-control' %> <br>
          <%= f.text_area :comment, placeholder: 'Comment', class: 'form-control', cols: '30', rows: '5' %> <br>
          <div class="text-center">

            <%= f.submit 'Inform about deleting', class: 'btn btn-danger' %>
            <%= f.submit 'Inform about changing address', class: 'btn btn-default' %>
          </div>
        <% end %>

提交表单后，验证未通过，我可以在表单顶部看到错误消息。但我想内联显示错误。我尝试将<span class="help-inline"><%= @change_office_address_.errors[:email] %></span> 添加到我的表单中，但它不起作用。

控制器：

class ChangeOfficeAddressesController < ApplicationController
  def create
    @change_office_address = ChangeOfficeAddress.new(change_office_addresses_params)
    respond_to do |format|
      if params[:commit] == 'Inform about changing address'
        if @change_office_address.save
          format.html { ChangeOfficeAddressMailer.change_office_address_new(@change_office_addres).deliver_now
                       redirect_to :back, notice: 'Thanks.' }
          format.json { redirect_to :back, status: :created, location: @change_office_address,
                                    notice: Thanks.' }
        else
          format.json { render json: @change_office_address.errors.full_messages, status: :unprocessable_entity }
        end
      elsif params[:commit] == 'Inform about changing address'
        @change_office_address.delete_office_address = 'Some text'
        @change_office_address.edit_office_address = nil
        if @change_office_address.save
          format.html { ChangeOfficeAddressMailer.change_office_address_new(@change_office_addres).deliver_now
                        redirect_to :back, notice: 'Thanks.' }
          format.json { redirect_to :back, status: :created, location: @change_office_address,
                                    notice: 'Thanks.' }
        else
          format.json { render json: @change_office_address.errors.full_messages, status: :unprocessable_entity }
        end
      else
        if @change_office_address.save
          format.html { ChangeOfficeAddressMailer.change_office_address_new(@change_office_addres).deliver_now
                        redirect_to :back, notice: 'Thanks.' }
          format.json { redirect_to :back, status: :created, location: @change_office_address,
                                    notice: 'Thanks.' }
        else
          format.json { render json: @change_office_address.errors.full_messages, status: :unprocessable_entity }
        end
      end
    end
  end

  private

  def change_office_addresses_params
    params.require(:change_office_address).permit(:email, :name, :edit_office_address, :add_office_address,
                                                  :delete_office_address, :office_id, :insurer_id, :city_id, :comment)
  end

end

还有 application.js：

$(document).ready(function() {
  return $(document).bind("ajaxError", "form.contact_form", function(event, jqxhr) {
    var $contact_form, $error_container, $error_container_ul;
    $contact_form = $(event.data);
    $error_container = $("#error_explanation", $contact_form);
    $error_container_ul = $("ul", $error_container).empty();
    if ($error_container.is(":hidden")) {
      $error_container.show();
    } else {
      $("#error_explanation").remove("#error_explanation");
    }
    return $.each(jqxhr.responseJSON, function(index, message) {
      return $("<li>").html(message).appendTo($error_container_ul);
    });
  });
});

有没有办法添加这些错误消息？谢谢。

Answer 1

为了获得内联验证，我将使用 Jquery Validate 并在您的 change_office_address 模型上进行验证。

当我不得不做类似的事情时，我使用了这个 SO 帖子作为参考，我在之后解释：

How to use jquery validation plugin in rails

首先在你的布局中包含 jquery 验证文件，可以在这里找到：

https://jqueryvalidation.org/

然后在您的表单中为必填字段添加一个类，例如<%= f.text_field :firstname, :class => "required" %>。然后用form_id编写一个方法来触发验证。

function validateofficeFuction() {
    $("#change_office_form").validate({
        errorClass: "authError"
    })
}

$(document).ready(validateofficeFuction);
$(document).on('page:load', validateofficeFuction);

如果您使用的是 turbolinks 5，它包含在 rails 5 中，而不是使用 $(document).ready 使用 $(document).on "turbolinks:load"

如果设置正确，您应该在每个失败的字段下方而不是在页面或表单的顶部显示错误消息。