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.
1
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 6 months ago:

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

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

Glad to hear!

Login to Comment