Rails 5.1 - 如何为 Bootstrap 4 自定义表单验证设置“novalidate”？

Question

这是我第一次尝试在 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>

Answer 1

两年多后，我决定再试一次。我忘了我发布了这个问题。

我正在使用带有 Rails 5.2.4.3 的 Bootstrap 4.5.0。

我从 Tyler Fredrizzi 的回答中获取了脚本，并将其添加到 application.html.erb 的 head 部分。我不记得我在 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 %>

花了一点时间，但我终于让它工作了。

Answer 2

由于某种原因，我无法添加评论。在@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 Forms 页面中发布的 javascript 代码中，需要做一些事情来完成这项工作。

1. 将 Javascript 移动到 assets/javascripts 以及您想要放置的任何位置。 （在新的Turbolinks issue page中，有建议将JS放在header中以避免多次加载问题）

2. 将 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 %>

Answer 3

我不确定您的问题是否已得到解答，但我刚刚遇到了同样的问题，并且能够通过在我的 form_with 标记中使用 html 哈希来解决它。

<%= form_with model: @user, html: { class: "needs-validation", novalidate: true } do |f| %>

Answer 4

你会想要这样的东西：

<%= form_tag contact_path, { class: "needs-validation novalidate", method: :get } do %>

method signature 需要两个参数，都可能是哈希值，您当前的尝试是将所有参数放入第一个哈希值中。

form_with 是新的热点，所以你可能会考虑切换到它。