#32 Client Side Validations
6-6-2016

Summary

Give early warning to users of form errors before they submit. With client side validations, the user can correct any errors prior to submitting the form.
10
rails view javascript 5:26

Summary

Gemfilegem 'client_side_validations', 
    github: 'DavyJonesLocker/client_side_validations', 
    branch: 'rails5'
gem 'client_side_validations-simple_form', 
    github: 'DavyJonesLocker/client_side_validations-simple_form', 
    branch: 'rails5'
Around like 658, you will want to change page:ready to turbolinks:load if you are using version 5 or later of turbolinks.
rails.validations.js  $(document).bind((window.Turbolinks ? 'turbolinks:load' : 'ready'), function() {
    ClientSideValidations.disableValidators();
    return $(ClientSideValidations.selectors.forms).validate();
  });
Terminal
rails g client_side_validations:install
rails g client_side_validations:copy_assets
user.rbclass User < ApplicationRecord
  validates :first_name, presence: true
  validates :last_name, presence: true
  validates :age, inclusion: { in: 18..125, message: 'must be 18 or older' }
end
_form.html.erb and _form_modal.html.erb<%= simple_form_for @user, validate: true do |f| %>
For AJAX loading and displaying a modal:
Keep in mind that client side validations will not trigger if the form fields are hidden which is why it is important to have a listener on showing the form to then enable the validations.
index.html.erb<%= link_to 'New User (AJAX Modal)', new_user_path, remote: true, class: 'btn btn-info' %>
new.js.erb$('#remotecontainer').html('<%= j render "form_modal" %>');
$('#form_modal').on('shown.bs.modal', function() {
  $('form[data-validate]').enableClientSideValidations();
}).modal('show');
Check out the callbacks section of the documentation to extend Client Side Validations even further
callbackswindow.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
  $('.submit').prop("disabled",true);
  callback();
};

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
  $('.submit').prop("disabled",false);
  callback();
};
darrylwolfaardt said over 1 year ago:

I have been working about 2 days to get this right, your  video really helped.

kobaltz PRO said over 1 year ago:

Glad to hear!

starswan said 11 months ago:

The last section doesn't work properly - you need to count the failure callbacks (and the successes) and only enable the submit button when the error count reaches zero. Otherwise with 2 fields on the form, you can error the first, complete the second and then submit the form.

Denny Deng said 8 months ago:

I think the original code of client_side_validations had been changed since you made this tutorial.


For one, their is no line of 658 in rails.validations.js. There are a total of only 574 lines.

Secondly,

gem 'client_side_validations',

    github: 'DavyJonesLocker/client_side_validations',

    branch: 'rails5'

gem 'client_side_validations-simple_form',

    github: 'DavyJonesLocker/client_side_validations-simple_form',

    branch: 'rails5'

It would get me an error message when I bundle installed.

I am struglling to get this to work. Could you be kind enough to point me to right direction?

kobaltz PRO said 8 months ago:

Their later versions should support Turbolinks and Rails 5. However, they did deprecate the Uniqueness validation as it could be seen as a security risk. You shouldn't have to specify the branch anymore.

Denny Deng said 8 months ago:

gem 'client_side_validations'

I tried to bundle install this and worked.

With so many trial and errors, I still could not figure this out. 

Denny Deng said 8 months ago:

It is working now after I have restarted the server!


Thank you  so much!

kobaltz PRO said 8 months ago:

Great! Glad to hear!

jakeyeaton16 PRO said about 2 months ago:

I have been trying to get this to work for little bit now and I'm wondering if it's because i'm using form_with. Do you know how to work around this?

This is what I have:

<%= form_with(model: listing, local: true, html: { id: 'new-listing-form' }, validate: true) do |form| %>

kobaltz PRO said about 2 months ago:

It looks like form_with is not supported.

https://github.com/DavyJonesLocker/client_side_validations/issues/696

jakeyeaton16 PRO said about 2 months ago:

Hmm... shoot.

So if a person wants to use form_with they will need to use good old fashion jQuery validation?

kobaltz PRO said about 2 months ago:

Yea, that's what it sounds like. Seems kind of silly to not support form_with if the other two will be deprecated in the next year or so.

jakeyeaton16 PRO said about 2 months ago:

Yeah it does haha

By the way. Do you have a video about how to create the commenting style like you have? It's much like Reddit :)

kobaltz PRO said about 2 months ago:

I don't yet, I plan to add one and work on this one more. I used Summernote for a while, but I didn't like having to deal with parsing HTML in some scenarios. This seemed like a much better option since most developers are familiar with Markdown. This library is called SimpleMDE (https://simplemde.com/). I'll probably cover an episode on it soon with integrating with ActiveStorage or something similar.

Login to Comment