Don't allow user to submit a form with empty fields in ruby on rails

Question

I am starting use Ruby on Rails and I am having a little problem. I have a form with 3 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 and try to submit, the browser (chrome or firefox ) display an error saying that the field must content an @. The same happen with the age field, if a letter is entered the browser show an error saying that the field only accept numbers.

I wanna know how to make that the browser show a message when any field is empty when you try to submit. I know how to do it in cakephp so I guess it can be done here in ruby too. I already validate the fields in the model, setting the presence in true but that only works for show a message after you submit and the page reload again.

Answer 1

When you use something like:

f.email_field

It is generating an HTML5 input element that tells the browser it has to be a valid email. HTML 5 also has a required='required' option 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 your form element. Note that in HTML5 you only need the word required in your form element, but the only way I know to add it in Rails is to use the option form I'm showing you here.

This will prevent submitting the form without that field. This works for current versions of Firefox, Chrome, Opera, and IE11. Safari will prevent the submission but doesn't indicate why. It just does nothing.

I would check this out: http://blueashes.com/2013/web-development/html5-form-validation-fallback/

Answer 2

You can set the HTML required attribute to true. Just add required: true to each field.

Here's what your new form will look like:

<%= 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 %>

Answer 3

Your case is pretty custom, that's why it looks pretty easy, but what you're really trying to achieve here is called 'client-side validation'.

To be really portable and user-friendly it has to be done in JavaScript. Basically this will be a script that validates the fields and outputs the corresponding error messages to the user, preventing form submission at the same time. This is almost the same that Rails does on the server side when you submit the form.

Once the problem is defined, you can approach it in one of the following ways:

1. Stay with Rails. Rails is initially designed to handle form validation on the server side. You can just accept the way it is, and it will yield the cleanest, shortest and the most semantic code possible. For it to be more seamless you can easily pull in some AJAX for it, which should be easy (http://guides.rubyonrails.org/working_with_javascript_in_rails.html). To user it'll look like nothing ever got submitted.

2. Write some custom JS yourself to handle those validations. Either on your own, or with the aid of libraries like http://jqueryvalidation.org/. This is going to be a mess, since you'll basically have to duplicate Rails server-side validation code on the client-side in a different language. And keep it in sync.

3. Use one of the helper libraries for Rails. E.g. https://github.com/joecorcoran/judge looks promising, but there are others to be Googled. These guys exercise the same idea: you've got server-side validations and they should be easily usable on the client-side. Certain libraries generate JavaScript automatically, others just send the form to be validated to the server behind the scenes.

If I were you, I would choose the 1st way + AJAX. Other ways would make simple matters unnecessarily complex, and instead of writing useful stuff you'll most certainly have to dive into debugging obscure JS and cryptic meta-programmed Ruby/Rails libraries.

Hope that helps!