jquery validation

How to Add jQuery Validation in your Rails 5 Forms Without a Gem

Some kind of jQuery validation should be implemented on any Rails form. It’s not always straightforward, but your users need it. There is nothing worse than to fill in many fields, submit the form, waiting for the page to load and then be told that what you did was not right.
Think of your own interactions. How better is it when the form tells you what’s wrong right away?

Thanks to Javascript, it’s possible to improve the user experience by telling the user what’s correct and what’s not at the same time as they are entering values. If you are not convinced about the need for UX improvements on basic forms, take a look at this article by Marcin Treder and this one by Luke Wroblewski (those are must read).

Ready to add some validation to your Ruby on Rails forms? Good. Let’s see what options are available, before building a simple, straightforward and yet very efficient jQuery form validation.

You could use a gem: client_side_validations

The easiest-laziest option would certainly to just drop in the gem “client_side_validations” to get your form validation up and running in no time. And that could be the perfect solution for you.

Yet, the chances of getting odd bugs are high. Especially if you are on a Rails 5 app using Turbolinks 5. Indeed, the gem client_side_validations is unfortunately not compatible with Turbolinks 5 and it won’t be easy to make it so. See the article on how to disable Turbolinks.

A more convenient solution might be to make use of the great jQuery Validation plugin in our Rails app. Let’s see how it’s done.

Better: jQuery Validation plugin for your Rails form

We will see how to add what I think are minimum client side validation you need on a form. The user must immediately know if a field has too many or too few characters, and that he has missed a required field when he tries to submit it. The form won’t submit until the user fill in the right data.

1 — Make sure you have gem ‘jquery-rails’ in your Gemfile.
2 — Simplest way to add the jQuery Validation plugin to your Rails app, drop these two lines in application.html.erb (check https://cdnjs.com/libraries/jquery-validate to get up-to-date links) :

<%= javascript_include_tag “https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js" %>
<%= javascript_include_tag “https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js" %>

OR: You can add the gem “jquery-validation-rails”. Granted, that’s not a no gem solution, but what we are getting here is just jQuery Validation for the Rails Asset Pipeline.

Now, let’s say you want to add validation to a form for an Article. You want to validate the title presence and length (you can do the same for the body and change the number of characters required).

First, add HTML5’s required: true to your fields. This will be picked up by jQuery validation, and display an error if the user tries to submit the form.

Like this: <%= f.text_field :title, placeholder: 'Your title here', required: true %>.

Now, here is the jQuery bit of code to make it working:

function validatearticleFunction() {
    debug: false,
    rules: {
      “article[title]”: { minlength: 10, maxlength: 100 }
$(document).on(‘page:load’, validatearticleFunction);

Here “#new_article” is the ID of your form. If you are not sure, take a look at the HTML output of your form. By default in Rails it will be “new_mymodel” for a new object.

Then, “article[title]” is the name -not the ID- of your form field.

As you would expect, “minlength” and “maxlength” specify the range of character the string need to have to be valid. Depending on your needs you could use “number: true”, “extension: png|doc”, and so on (check the jQuery validation plugin website linked above).

Lastly, if you use Turbolinks you will have to use “turbolinks:load”, or you could also remove it altogether.

How to Add jQuery Validation in your Rails 5 Forms Without a Gem
4.8 (95%) 4 votes

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *