Javascript 在旧窗体而不是模式窗体上显示错误的Rails

我正在开发一个应用程序，如果用户单击“添加新”按钮，表单将以模式形式显示，并且能够像常规rails表单一样填充、显示错误并将数据插入/保存到数据库

这是我的表单@

视图/联系人/_form.html

：

  <%= form_for(@contact, html: {multipart: true}) do |f| %>

      <div class="card">
        <div class="card-header">
          <h2 class="display-5 main-text-blue text-center font-weight-bold"><%= @contact.new_record? ? 'Add New Contact' : 'Update Contact'%> </h2>
        </div>
        <div class="card-body">

     <div class="errors">
                <% if @contact.errors.any? %>
                    <div class="alert alert-danger">
                       <h5 class="text-center mb-n1 pb-1"><i class="fa fa-exclamation-triangle text-danger"></i> Please correct the following errors: </h5>
                   </div>
                <% end %>
            </div>

          <div class="form-group row">
            <div class="col-md-5 mx-auto">

            <div class="wrap" id="avatar-container">
                  <div class="valign-middle">
                      <div class="form-group">
                          <%= image_tag @contact.contact_avatar.attached? ? @contact.contact_avatar : "100x100.png", class: "img-responsve img-preview" %>
                          <label for="file" class="sr-only">Choose Image</label>
                           <%= f.file_field :contact_avatar, id: "file" %>
                      </div>
                  </div>
              </div>

            </div>
          </div>


          <div class="form-group row">
            <%= f.label :name, class: "col-lg-2 col-form-label" %> 
            <div class="col-lg-10">
              <%= f.text_field :name, class: "form-control #{'is-invalid' if has_error?(@contact, :name) }", id: "name", placeholder: "Name.." %>
                <% if has_error?(@contact, :name) %>
                      <span class="text-danger">
                          <%= get_error(@contact, :name)%>
                      </span>
                <% end %>
            </div>
          </div>


          <div class="form-group row">
             <%= f.label :email, class: "col-lg-2 col-form-label" %> 
            <div class="col-lg-10">
              <%= f.text_field :email, class: "form-control #{'is-invalid' if has_error?(@contact, :email) }", id: "email", placeholder: "Email.." %>
             <% if has_error?(@contact, :email) %>
                      <span class="text-danger">
                          <%= get_error(@contact, :email)%>
                      </span>
                <% end %>
            </div>
          </div>

          <div class="form-group row">
            <%= f.label :mobile, class: "col-lg-2 col-form-label" %> 
            <div class="col-lg-10">
              <%= f.text_field :mobile, class: "form-control #{'is-invalid' if has_error?(@contact, :mobile) }", id: "mobile", placeholder: "Mobile.." %>
              <% if has_error?(@contact, :mobile) %>
                      <span class="text-danger">
                          <%= get_error(@contact, :mobile)%>
                      </span>
                <% end %>
            </div>
          </div>


          <div class="form-group row">
             <%= f.label :phone, class: "col-lg-2 col-form-label" %> 
            <div class="col-lg-10">
             <%= f.text_field :phone, class: "form-control #{'is-invalid' if has_error?(@contact, :phone) }", id: "phone", placeholder: "Phone.." %>
              <% if has_error?(@contact, :phone) %>
                      <span class="text-danger">
                          <%= get_error(@contact, :phone)%>
                      </span>
                <% end %>
            </div>
          </div>


          <div class="form-group row">
            <%= f.label :country, class: "col-lg-2 col-form-label" %>
            <div class="col-lg-10">
               <%= f.text_field :country, class: "form-control", id: "country", placeholder: "Country.." %>
            </div>
          </div>


          <div class="form-group row">
            <%= f.label :address, class: "col-lg-2 col-form-label" %>
            <div class="col-lg-10">
              <%= f.text_field :address, class: "form-control", id: "address", placeholder: "Address.." %>
            </div>
          </div>
          <div class="form-row">
             <%= f.label :location, class: "col-lg-2 col-form-label" %>
            <div class="col-4">
             <%= f.text_field :city, class: "form-control", id: "city", placeholder: "City.." %>
            </div>
            <div class="col-4">
              <%= f.text_field :state, class: "form-control", id: "state", placeholder: "State.." %>
            </div>
            <div class="col-2">
               <%= f.text_field :zip, class: "form-control", id: "zip", placeholder: "Zip.." %>
            </div>
          </div>
          <div class="form-group row category-mt">
             <%= f.label :category, class: "col-lg-2 col-form-label" %>
            <div class="col-lg-5">
                <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Select Category" }, id: "category_select", class: "form-control #{'is-invalid' if has_error?(@contact, :category) }" %>
                 <% if has_error?(@contact, :category) %>
                      <span class="text-danger">
                          <%= get_error(@contact, :category)%>
                      </span>
                <% end %>
            </div>
            <div class="col-lg-3">
              <a class="btn btn-outline-secondary add-category-button btn-block mt-1" href="#" id="add-category-btn">Add Category</a>
            </div>
          </div>

          <div class="form-group row" id="add-new-category">
            <label class="col-lg-2 col-form-label" for="location">New Category:</label>
            <div class="col-lg-10">
              <div class="input-group">
                    <input id="new-category" name="new-category" class="form-control"  placeholder="Enter category name" type="text">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary category-btn" id="save-new-category-btn" type="button"><i class="fa fa-check"></i></button>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row">
              <%= f.label :note, class: "col-lg-2 col-form-label" %>
            <div class="col-lg-10">
               <%= f.text_area :note, class: "form-control", id: "note", placeholder: "Note..", rows: "3" %>
            </div>
          </div>
        </div>
        <div class="card-footer  text-center mx-auto">
           <%= f.submit @contact.new_record? ? "Save" : "Update", class: "btn btn-primary border-button mb-3 ml-3", id: "save-btn" %>
           <%= link_to "Cancel", contacts_path, class: "btn btn-outline-secondary border-button mt-n3", id: "cancel-btn" %>
      </div>
      </div>

       <% end %>

这是我的模式代码：

<!-- Modal -->
<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body" id="form-modal-body">
          <%= render "form" %>
      </div> 
    </div>
  </div>
</div>

我甚至尝试使用以下方式渲染表单：

$('#form-modal-body').html('<%= escape_javascript render("form") %>')

$（'#form modal body'）.html（''）

但这会弄乱表单设计，所以我切换回仅在模式本身内部渲染表单

现在，modal工作正常，并显示了新的联系形式。但是，当我试图在不输入任何数据的情况下单击

保存

按钮时，我希望在模式表单上看到错误消息/验证，它显示

http://localhost:3000/dashboard/contacts/new

这是常规的rails表单，而不是在modal中显示它们

不知道为什么会这样。我需要在模式上显示错误，并且能够保存其中的数据，并且在单击

save

按钮时不会将其重定向到常规格式

---

请帮忙

您应该将remote属性设置为true，即form\u中的

remote:true

单击submit按钮，它将在Ajax中提交表单请求

<%= form_for(@contact, remote: true, html: {multipart: true}) do |f| %>

$('#form-modal-body').html('<%= escape_javascript render("form") %>')

<%= form_for(@contact, remote: true, html: {multipart: true}) do |f| %>