This is my first attempt in creating forms in Bootstrap 4 using its native validation.
When I execute this code the default error messages appear since I have not set the novalidate value.
<%= 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? I have not seen anything about how to declare novalidate in Rails anywhere online.
<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.
I took the script from Tyler Fredrizzi's answer and added it to the head section in application.html.erb. I don't remember if the Bootstrap I was using in 2018 required an additional script or not.
Here is my form_tag statement.
<%= 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.
I'm not sure if your question has been answered but I just ran into the same issue and was able to resolve it by using an html hash in my form_with tag.
<%= 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.
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. I utilized the same Javascript from the example given on the bootstrap page, which I linked here.
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.
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.
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.
Move the Javascript to assets/javascripts and wherever you want to put it. (In the new Turbolinks issue page, there were suggestions of putting the JS in the header to avoid multi-loading issues)
Change the load event to turbolinks:load, as the JS action has changed for how documents are handled. See the code below.
This is in my app/assets/javascripts/application.js, as I will use these validations for all of my forms.
(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.
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.
I am using the Devise gem for a user login page and user registration pages on a basic Ruby on Rails app. I want to get rid of the ugly default styling for when there is an error. I was able to replace the error box with some bootstrap styling, but I can't find any answers about how to get rid of the ugly red boxes that appear around my inputs and my input labels. Also, the inputs are shrinking when validation occurs. They start at 100% width. Then, if there is an error,they shrink. Here is an image of both problems. The input box should be as wide as the .danger div above:
Here is the code for this page:
<div class="row">
<div class="top col-md-4 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-10 col-xs-push-1">
<div class="logo_container">
<%= image_tag "musilogopurple.png", class: 'logo_big' %>
</div>
<p class="text-center">Forget your password? Enter your email below and we will send you reset instructions.</p>
<br />
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: 'form-control' %>
</div>
<div class="actions">
<br />
<%= f.submit "Send", class: 'btn btn-purple'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
I would very much appreciate some guidance. Thank you!
Did you scaffold anything? Scaffolds bring in CSS files try deleting those if you're not using it. In addition, it would help if you posted the CSS files it's receiving styling from.
I have a very simple website that has a scaffold articles with a string title, and text description. Sometimes my submit button doesn't work for edit and new. Then after I refresh the page the buttons start to work again. I'm using bootstrap-sass 3.3.6, rails 5.0.0.
This is the code for my form:
<%= form_for(article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-6">
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true%>
</div>
</div>
<br />
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :description %>
</div>
<div class="col-sm-6">
<%= f.text_area :description, rows: 5, class: "form-control", placeholder: "Body of the article", autofocus: true%>
</div>
</div>
</div>
<div class="form-group">
<%= f.submit class:"btn btn-primary btn-lg" %>
</div>
What could be causing this?
You have a stray </div> tag.
This type of error is most frequently one generated by invalid HTML. Various sources of errors can be:
missing < or >
HTML tag not closed
Orphaned HTML closing tag (where no
opening one is related);
Forms nested within table or tr tags (within td is
allowed).
If properly formatting html doesn't work for you, then it can be a turbolinks issue, you can try disabling turbolinks like :data-no-turbolink => true (just a patch not the solution)
I know the question is old, but I had the same problem and the fix above did not help (no stray tags). It turns out that closing the message/warning section in class="panel-heading" caused it. Removing this bootstrap class fixed the issue.
Ruby 2.1.5 on Rails 4.2.0:
I have two directories. One directory is a rails-generate scaffold named 'inqueries'. The other directory is named 'welcome', which only houses a landing paged named index.html.erb. The inquery form works & submits fine as long as I'm using the view from the actual 'inquery' scaffold/directory.
I am able to render the inquery _form on my index.html.erb landing page using :
<%= render partial: "inqueries/form", locals: {inquery: #Inquery} %>
However, this JUST renders the form. When I hit the submit button, no errors, flash messages, or inquery is submitted. It is complete non-action, including on my rails terminal.
How can I properly make the form work on my landing page?
Here is my welcome_controller.rb file. This controller handles the landing page where I am trying to render the inquery scaffold's form:
class WelcomeController < ApplicationController
def index
#inquery = Inquery.new
render layout: false
end
end
This is my new rails scaffold-generated method in the inqueries_controller.rb:
def new
#inquery = Inquery.new
respond_with(#inquery)
end
Sorry, Here is the Inquery _form itself:
<%= form_for(#inquery) do |f| %>
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<%= f.submit t('.submit'), class: "btn btn-primary" %>
<% end %>
EDIT 2: I saw there were a couple of suggestions with the logic. I have simplified the partial just to see if I could get it to work and it still does not submit properly outside of its directory. I am new to rails, do I need to render a new action in the second directory that I am calling it into?
Your partial has 2 forms. The one which submits to inqueries#create is an empty form with no submit button, the other which has no action contains the text fields and the submit action.
The form_for tag will create the html tags, you dont need to specify them again.
Tip - Switch to haml. You won't ever look back at erb :)
This should work (not tested) -
<%= form_for(#inquery) do |f| %>
<div id="error_explanation">
<% if #inquery.errors.any? %>
<h2>
<%= pluralize(#inquery.errors.count, "error") %> prohibited this inquery from being saved:
</h2>
<ul>
<% #inquery.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
<% end %>
</div>
<br />
<div class="col-lg-12">
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<%= f.submit t('.submit'), class: "btn btn-primary" %>
</div>
</div>
<% end %>
Figured it out. Foolish error,
My welcome page is a bootstrap theme that I hadn't fully gone over. I had imported some unnecessary javascript files that I think were blocking the form.
I am using Devise in my web application and was wondering how to use a different button than the default one to submit information. I am attempting to embed it in a twitter boot strap modal, and use a button in the footer of the modal to submit the info, rather than the standard signup button. Here's what I have for code right now:
<div class="modal-body">
<h4>...</h4>
<p>...</p></b>
<p>...</p>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div>
<%= f.label :email %>
<%= f.email_field :email %>
</div>
<div>
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
</div>
<div>
<%= f.submit "Sign up" %>
</div>
<% end %>
</div>
<div class="modal-footer">
Close
Sign up
</div>
</div>
In essence, I am trying to make the button in this line
Sign up
do what the button in this line does:
<div><%= f.submit "Sign up" %></div>
Anybody out there have any experience with this?
you can just extend the form... say to cover the modal body and the footer too, and replace the link
do something like
<%= form_for ..... %>
<div class="modal-body">
your form fields should go here somewhere
.....
</div>
<div class="modal-footer">
Close
<%= f.submit "Sign up" %>
</div>
<% end %>
Because this seems a little too obvious, I'm not really sure I understood your question very well. If that's the case, let me know
A button is different than a link and think that you will have the issues. I have done very similar things recently and instead of using submit.
<input class="btn btn-success" type="submit"value="Submit" >
This is what I use in my rails applications inbetween the form tags. It's not as pretty as using rails, but it works.