![](/img/trans.png)
[英]How to enable browser validation/disable novalidate with simple form
[英]Rails 5.1 - How Do I Set “novalidate” for Bootstrap 4 Custom Form Validation?
這是我第一次嘗試在 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>
兩年多后,我決定再試一次。 我忘了我發布了這個問題。
我將 Bootstrap 4.5.0 與 Rails 5.2.4.3 一起使用。
我從 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 %>
花了一點時間,但我終於讓它工作了。
我不確定您的問題是否已得到解答,但我剛剛遇到了同樣的問題,並且能夠通過在我的 form_with 標簽中使用 html 哈希來解決它。
<%= form_with model: @user, html: { class: "needs-validation", novalidate: true } do |f| %>
出於某種原因,我無法添加評論。 在@nlfauria 的回答中,如果您使用的是 Rails > 5.0.0,那么關鍵是使用form_with
。
我可以確認 Bootstrap 4 驗證使用form_with
標簽而不是form_for
,這是 Devise 使用的默認值。 我使用了引導程序頁面上給出的示例中的相同 Javascript,我在此處鏈接了該示例。
如果您切換到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 代碼中,需要做一些事情來完成這項工作。
將 Javascript 移動到assets/javascripts
以及您想要放置的任何位置。 (在新的Turbolinks issue頁面中,有建議將JS放在header中以避免多加載問題)
將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 %>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.