Prevent user from submitting form with blank fields in ruby on rails
I am starting to use Ruby on Rails and I have a little problem. I have a form with three fields, this is the code:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
In the email field, when you write something that is not an email address and try to send, the browser (chrome or firefox) shows an error indicating that the field must contain @. The same thing happens with the age field, if a letter is entered, a message appears in the browser that the field only accepts numbers.
I want to know how to get the browser to show a message when any field is empty when you try to submit. I know how to do this in cakephp, so I think it can be done here in ruby as well. I already check the fields in the model by setting the presence to true, but this only works to display the message after the page is submitted and reloaded.
source to share
When you use something like:
f.email_field
It generates an HTML5 input element that tells the browser that it should be a valid email address. HTML 5 also has a parameter required='required'
that can be used to prevent blank fields.
You can add it like this:
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email", :required => 'required' %>
</div>
This will add required='required'
to the form element. Note that in HTML5 you only need a word required
in your form element, but the only way I know to add it in Rails is by using the option form that I show you here.
This will prevent the form from being submitted without this field. This works for current versions of Firefox, Chrome, Opera and IE11. Safari will prevent the submission, but won't tell you why. It just doesn't do anything.
I would figure it out: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
source to share
You can set the HTML attribute required
to true
. Just add required: true
to each field.
Your new form will look like this:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, required: true, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, required: true, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, required: true, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
source to share
Your case is pretty common, so it looks pretty easy, but what you are actually trying to achieve here is called "client side validation".
To be truly portable and usable, this needs to be done in JavaScript. Basically it will be a script that validates the fields and prints the appropriate error messages to the user while preventing the form from being submitted. This is pretty much the same as Rails server side when submitting a form.
Once the problem is identified, you can address it in one of the following ways:
-
Stay with Rails. Rails was originally designed to handle form validation on the server side. You can just go along with it as it is and it will yield the cleanest, shortest, and most semantic code. To make it more seamless you can easily suck in some kind of AJAX, which should be easy ( http://guides.rubyonrails.org/working_with_javascript_in_rails.html ). To the user, it will appear as if nothing was sent.
-
Write some custom JS yourself to handle these checks. Either by yourself or with the help of libraries like http://jqueryvalidation.org/ . This is going to be a mess as you basically have to duplicate your Rails server side validation code on the client side in a different language. And keep it in sync.
-
Use one of the Rails helper libraries. For example. https://github.com/joecorcoran/judge looks promising, but there are others that will Googled. These guys are sticking with the same idea: you have server side validations and should be easy to use client side. Some libraries generate JavaScript automatically, others just submit the form for validation to the server behind the scenes.
If I were you, I would choose the 1st + AJAX way. Other ways would make simple things unnecessarily complicated, and instead of writing helpful stuff, you would certainly have to dive into the obscure JS debugging and cryptic Ruby / Rails metaprogrammed library.
Hope it helps!
source to share