[英]Rails 5.1 - How Do I Set “novalidate” for Bootstrap 4 Custom Form Validation?
This is my first attempt in creating forms in Bootstrap 4 using its native validation.这是我第一次尝试在 Bootstrap 4 中使用其原生验证创建表单。
When I execute this code the default error messages appear since I have not set the novalidate
value.当我执行此代码时,会出现默认错误消息,因为我没有设置novalidate
值。
<%= form_tag contact_path, class: "needs-validation", method: 'get' do %>
<div class="row">
<div class="form-group col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<%= label_tag "#{t :label_name}" %><%= text_field_tag :name, params[:name], class: "form-control", :minlength => 2, :maxlength => 40, placeholder: "#{t :contact_placeholder_name}", required: "required" %>
<div class="invalid-feedback"><%= "#{t :label_name} #{t :contact_error_required}" %></div>
</div>
<div class="form-group col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<%= label_tag "#{t :label_email_address}" %><%= email_field_tag :email, params[:email], class: "form-control", :minlength => 15, :maxlength => 70, placeholder: "#{t :contact_placeholder_email}", required: "required" %>
<div class="invalid-feedback"><%= "#{t :label_email_address} #{t :contact_error_required}" %></div>
</div>
<%= submit_tag "#{t :contact_submit}" %>
</div>
<% end %>
I have the following with no success.我有以下没有成功。 The last one produced the same markup as the previous one.最后一个产生与前一个相同的标记。
<%= form_tag contact_path, class: "needs-validation novalidate", method: 'get' do %> - questioned if this would work since it's not identified as a class in the Bootstrap documentation.
<%= form_tag contact_path, class: "needs-validation", :novalidate, method: 'get' do %> *** error ***
<%= form_tag contact_path, class: "needs-validation", novalidate: "novalidate", method: 'get' do %>
<%= form_tag contact_path, class: "needs-validation", novalidate: true, method: 'get' do %>
How do I reproduce the following markup in Rails to get my custom error messages to appear?如何在 Rails 中重现以下标记以显示我的自定义错误消息? I have not seen anything about how to declare novalidate
in Rails anywhere online.我还没有看到任何关于如何在网上任何地方在 Rails 中声明novalidate
。
<form class="needs-validation" novalidate>
After over two years I decided to try again.两年多后,我决定再试一次。 I forgot that I posted this question.我忘了我发布了这个问题。
I'm using Bootstrap 4.5.0 with Rails 5.2.4.3.我将 Bootstrap 4.5.0 与 Rails 5.2.4.3 一起使用。
I took the script from Tyler Fredrizzi's answer and added it to the head section in application.html.erb.我从 Tyler Fredrizzi 的回答中获取了脚本,并将其添加到 application.html.erb 的 head 部分。 I don't remember if the Bootstrap I was using in 2018 required an additional script or not.我不记得我在 2018 年使用的 Bootstrap 是否需要额外的脚本。
Here is my form_tag statement.这是我的 form_tag 声明。
<%= form_tag contact_path, novalidate: "novalidate", class: 'needs-validation', method: "get" do %>
The default popup messages still displayed when form errors occurred.发生表单错误时仍会显示默认的弹出消息。 I updated my submit button to remove them.我更新了我的提交按钮以删除它们。
<%= submit_tag "#{t :contact_submit}", class: "btn btn-default", formnovalidate: true %>
It took a bit but I finally got it working.花了一点时间,但我终于让它工作了。
我不确定您的问题是否已得到解答,但我刚刚遇到了同样的问题,并且能够通过在我的 form_with 标签中使用 html 哈希来解决它。
<%= form_with model: @user, html: { class: "needs-validation", novalidate: true } do |f| %>
For some reason, I can't add a comment.出于某种原因,我无法添加评论。 On @nlfauria's answer, the key there is to use the form_with
if you are using Rails >5.0.0.在@nlfauria 的回答中,如果您使用的是 Rails > 5.0.0,那么关键是使用form_with
。
I can confirm that the Bootstrap 4 validations work with the form_with
tag and not with form_for
, which was the default used by Devise.我可以确认 Bootstrap 4 验证使用form_with
标签而不是form_for
,这是 Devise 使用的默认值。 I utilized the same Javascript from the example given on the bootstrap page, which I linked here .我使用了引导程序页面上给出的示例中的相同 Javascript,我在此处链接了该示例。
If you switch to the form_with
, ensure that you use form.text_field
and required: true
in your fields to match the expected syntax of the new form_with
.如果您切换到form_with
,请确保在您的字段中使用form.text_field
和required: true
以匹配新form_with
的预期语法。
To clarify, I am currently using Rails 6.0.0 and Bootstrap 4.3.1, so please be aware the expected behavior may be difference.澄清一下,我目前使用的是 Rails 6.0.0 和 Bootstrap 4.3.1,所以请注意预期的行为可能会有所不同。
For Turbolinks 5.0.0 and >
, in the javascript code that was posted in the Bootstrap Forms page, there a few things to do to make this work.对于Turbolinks 5.0.0 and >
,在 Bootstrap Forms 页面中发布的 javascript 代码中,需要做一些事情来完成这项工作。
Move the Javascript to assets/javascripts
and wherever you want to put it.将 Javascript 移动到assets/javascripts
以及您想要放置的任何位置。 (In the new Turbolinks issue page, there were suggestions of putting the JS in the header to avoid multi-loading issues) (在新的Turbolinks issue页面中,有建议将JS放在header中以避免多加载问题)
Change the load
event to turbolinks:load
, as the JS action has changed for how documents are handled.将load
事件更改为turbolinks:load
,因为 JS 操作已更改为处理文档的方式。 See the code below.请参阅下面的代码。
This is in my app/assets/javascripts/application.js
, as I will use these validations for all of my forms.这是在我的app/assets/javascripts/application.js
,因为我将对我的所有表单使用这些验证。
(function() {
'use strict';
window.addEventListener('turbolinks:load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
I'm no expert in JavaScript, so if someone has a better method, any advice would be much appreciated.我不是 JavaScript 专家,所以如果有人有更好的方法,任何建议将不胜感激。
Here is the form I used with all of my code:这是我在所有代码中使用的表单:
<%= form_with(model: resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, novalidate: true, class: 'needs-validation' }) do |f| %>
<div class='form-group'>
<div class="input-group">
<%= render 'shared/input_group_prepend_label', label: 'Name' %>
<%= f.text_field :name, autofocus: true, autocomplete: "name", class: 'form-control rounded' %>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Email' %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
<div class="valid-feedback">
Looks good!
</div>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class='form-group'>
<div class="input-group">
<%= render 'shared/input_group_prepend_label', label: 'New Password' %>
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control', placeholder: 'Leave blank if you dont want to change it' %>
</div>
<small id="passwordHelpBlock" class="form-text text-light">
Your password must be 6-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Confirm New Password' %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control', placeholder: 'Confirm you new password!' %>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Current Password' %>
<%= f.password_field :current_password, autocomplete: "current-password", class: 'form-control', placeholder: 'Please input your current password to confirm changes.', required: true %>
<div class="invalid-feedback">
Please input your current password to confirm changes!
</div>
</div>
<%= render 'shared/form_submit_button_custom_label', form: f, custom_label: 'Update Information' %>
<% end %>
You'll want something like:你会想要这样的东西:
<%= form_tag contact_path, { class: "needs-validation novalidate", method: :get } do %>
The method signature expects two args, both potentially hashes, your current attempts are throwing all the arguments into the first hash. 方法签名需要两个参数,都可能是散列,您当前的尝试是将所有参数放入第一个散列中。
form_with is the new hotness, however, so you might consider switching to it.然而, form_with是新的热点,因此您可以考虑切换到它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.