在 Rails 中提交引导模态表单后,如何显示有错误的模态
After submitting bootstrap modal form in Rails, how to show modal with errors?
我正在使用引导模式和带有Ruby on Rails的Simple_form宝石。提交后一切正常。问题是当出现验证错误时,模式会在按下提交按钮时关闭。仅当再次单击模式按钮时,才会显示错误。
提交表单后,我需要最终用户看到错误消息 - 我一直在想如果有错误,我可以使用 javascript 重新启动模式,但我不太清楚如何。任何帮助将非常感谢。
我的模态如下:
<%= link_to "Click here »".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">×</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
谢谢
我敢肯定这不是最干净或最好的方法,但最终找到了仅在出现错误时才再次加载模态的解决方案。刚刚使用模态将以下内容添加到我的页面。
<% if @contact.errors.present?%>
<script>
$(window).load(function () {
$('#myModal').modal('show');
});
</script>
<% end %>
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- bootstrap消除模态并显示另一个模态
- React.js中显示了模态时如何执行某些操作
- AngularJS bootstrap.ui模态未显示
- 从模态引导模态不显示
- 如何使用离子和角度在模态内显示选定的图像名称
- 谷歌地图在模态没有显示后两次开放-离子
- 触发模态以显示无非单击
- 在模态中显示Javascript变量
- 将值传递给模态并显示为纯文本
- 如何创建多个模态来显示不同的数据
- 如何在具有设计功能的模态中显示忘记的错误消息
- 当事件被触发时,PhoneGap和OnsenUI模态没有显示
- 离子模态不显示
- Angular Bootstrap UI模态没有显示
- 使用responsdto|format|format.js在一个模态中显示一条消息
- 如何使用 AngularJS 在模态中显示实体的数据
- 通过使用 angularJs 更正未在模态中显示的信息
- 我有一个高的页面与模态,显示在一个非常高的框架内.我如何定位模态,使其在屏幕上