ruby-on-rails - Rails 5.1 - 如何为 Bootstrap 4 自定义表单验证设置“novalidate”?
问题描述
这是我第一次尝试在 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 中重现以下标记以显示我的自定义错误消息?我还没有看到任何关于如何novalidate
在 Rails 中在线任何地方声明的信息。
<form class="needs-validation" novalidate>
解决方案
两年多后,我决定再试一次。我忘记了我发布了这个问题。
我正在使用带有 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 %>
花了一点时间,但我终于让它工作了。
推荐阅读
- javascript - 我需要在 javascript 中创建一个函数,在其中执行 curl 请求,然后提供内联输入
- styles - 如何在 react native web 中使用 alignItems="center"、justifyContent="center" 和 position="absolute"
- python - 如何使线程与 pynput 一起用于转义序列?
- python - 从峰值位置创建值窗口
- jenkins-pipeline - 你怎么知道路径是詹金斯管道中的文件还是目录
- javascript - 如何在不使用打包管理器的情况下将 localForage 添加到我的 Web 应用程序
- python - 如何将 keras 顺序模型恢复到之前构建的状态?
- java - 如何使用 Thymeleaf 读取 HTML 中的列表
- objective-c - NSTableView 删除表格视图边框和单元格之间的填充/空格
- python - 我应该在 Pycharm 中使用什么文件夹?