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.
10
rails view javascript

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 10 months ago:

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

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

Glad to hear!

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

Login to Comment