Client Side Validations

#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.
11
rails view javascript 5:26 min

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();
};
562216?v=3&s=64
darrylwolfaardt said about 1 year ago:

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

635114?v=3&s=64
kobaltz said about 1 year ago:

Glad to hear!

53059?v=3&s=64
starswan said 5 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.

Photo
Denny Deng said 2 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?

635114?v=3&s=64
kobaltz said 2 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.

Photo
Denny Deng said 2 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. 

Photo
Denny Deng said 2 months ago:

It is working now after I have restarted the server!


Thank you  so much!

635114?v=3&s=64
kobaltz said 2 months ago:

Great! Glad to hear!

Login to Comment