在 Rails 中提交引导模式表单后，如何显示有错误的模式？答案

【问题标题】：After submitting bootstrap modal form in Rails, how to show modal with errors?在 Rails 中提交引导模式表单后，如何显示有错误的模式？
【发布时间】：2016-07-13 20:55:00
【问题描述】：

我正在使用引导模式和 Simple_form gem 与 Ruby on Rails。提交后一切正常。问题是当出现验证错误时，模式会在提交按钮被按下时关闭。仅当再次单击模态按钮时才会显示错误。

一旦提交表单，我需要最终用户查看错误消息 - 我一直在想，如果有错误，我可以使用 javascript 重新启动模式，但我不太清楚如何。任何帮助都会非常感谢。

我的模态如下：

      <%= link_to "Click here &raquo;".html_safe,
    "#myModal", data: { toggle: 'modal'}, class: "button-main", id: "button-contact" %>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Email Contact Form</h4>
          </div>
          <div class="modal-body">
            <%= simple_form_for @contact, url: contact_path, html: { id: "contact-form" } do |f| %>
                    <%= f.error_notification %>
            <%= f.input :name, error: 'Name is mandatory, please specify one' %>
            <%= f.input :email, label: 'Your Email' %>
                    <%= f.input :email_confirmation, label: 'Confirm your Email address' %>
                    <%= f.input :preferred_time, collection: ["Any time", "9am - 12pm Tuesday", "2pm - 6pm Tuesday", "9am - 12pm Wednesday"], selected: "Any time" %>
                    <%= f.input :subject, collection: ["New Appointment", "Request to change existing appointment", "Information", "Other"], selected: "New Appointment" %>
                        <%= f.input :message, as: :text %>

                <div class="modal-footer">
                <%= f.button :submit, "Send", 'data-disable-with' => "Sending...",  class: "submit-button", id: "modal-send" %>
                            <p class="warning">
                                Certain email providers have been known to mark our replies as spam, please be sure to check your junk mail inbox if awaiting a response
                            </p>
                <% end %>
          </div>
        </div>
      </div>
    </div>
</div>

和我的模型：

  class Contact

    include ActiveModel::Model
    include ActiveModel::Conversion
    include ActiveModel::Validations

    attr_accessor :name, :email, :email_confirmation, :message, :preferred_time, :subject

    validates :name,
      presence: true

    validates :email,
      presence: true, length:  { minimum: 6, maxium: 30 }, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }, confirmation: true

    validates :email_confirmation,
      presence: true, length:  { minimum: 6, maxium: 30 }, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }

    validates :message,
      presence: true,  length: { minimum: 6, maxium: 1000 }

  end

谢谢

【问题讨论】：

你能举个例子吗？谢谢

标签： javascript ruby-on-rails twitter-bootstrap bootstrap-modal simple-form

【解决方案1】：

我确信这不是最干净或最好的方法，但最终找到了一个解决方案，只有在出现错误时才再次加载模式。刚刚使用模态将以下内容添加到我的页面中。

<% if  @contact.errors.present?%>
    <script>
        $(window).load(function () {
            $('#myModal').modal('show');
            });
    </script>
<% end  %>

【讨论】：