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

要获得内联验证，我会在您的change_office_address模型上使用Jquery Validate并验证。

当我不得不做类似的事情时，我使用这个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”

如果设置正确，您应该在页面或表单顶部的每个失败字段下面收到错误消息。

带有remote：form的form_for中的内联错误消息

1 个答案: