这是我第一次尝试使用其本机验证在Bootstrap 4中创建表单。
当我执行此代码时,出现默认错误消息,因为我没有设置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 %>
我有以下但没有成功。最后一个产生与前一个相同的标记。
<%= 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 %>
如何在Rails中重现以下标记以显示我的自定义错误消息?我还没有看到任何关于如何在任何地方在Rails中声明novalidate
的内容。
<form class="needs-validation" novalidate>
答案 0 :(得分:0)
你想要的东西是:
<%= form_tag contact_path, { class: "needs-validation novalidate", method: :get } do %>
method signature需要两个args,两个都是哈希值,你当前的尝试是将所有参数都抛给第一个哈希值。
form_with是新的热点,所以您可以考虑切换到它。
答案 1 :(得分:0)
我不确定您的问题是否已得到回答,但我遇到了同样的问题,并且能够通过在form_with标签中使用html哈希来解决它。
<%= form_with model: @user, html: { class: "needs-validation", novalidate: true } do |f| %>
答案 2 :(得分:0)
由于某种原因,我无法添加评论。在@nlfauria的答案上,如果您使用的是Rails> 5.0.0,则关键是使用form_with
。
我可以确认Bootstrap 4验证可以与form_with
标签一起使用,而不能与form_for
一起使用,这是Devise使用的默认设置。我使用了与引导页面上给出的示例相同的Javascript,并链接了here。
如果切换到form_with
,请确保在字段中使用form.text_field
和required: true
以匹配新form_with
的预期语法。
为澄清起见,我目前正在使用Rails 6.0.0和Bootstrap 4.3.1,因此请注意预期的行为可能有所不同。
对于Turbolinks 5.0.0 and >
,在Bootstrap表单页面上发布的javascript代码中,需要做一些事情才能使这项工作生效。
将Java脚本移至assets/javascripts
以及您想放置在任何位置的Java脚本。 (在新的Turbolinks问题页面中,建议将JS放在标题中,以避免出现多次加载问题)
将load
事件更改为turbolinks:load
,因为JS操作已更改了文档处理方式。请参见下面的代码。
这在我的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);
})();
我不是JavaScript方面的专家,所以如果有人有更好的方法,任何建议将不胜感激。
这是我所有代码使用的形式:
<%= 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 %>
答案 3 :(得分:0)
两年多以后,我决定再次尝试。我忘了我发布了这个问题。
我正在将Bootstrap 4.5.0与Rails 5.2.4.3。一起使用
我从Tyler Fredrizzi的答案中提取了脚本,并将其添加到application.html.erb的开头部分。我不记得我在2018年使用的Bootstrap是否需要其他脚本。
这是我的form_tag语句。
<%= form_tag contact_path, novalidate: "novalidate", class: 'needs-validation', method: "get" do %>
发生表单错误时,仍会显示默认弹出消息。我更新了提交按钮以将其删除。
<%= submit_tag "#{t :contact_submit}", class: "btn btn-default", formnovalidate: true %>
花费了一点时间,但我终于开始工作了。