• Home

  • Episodes

  • About

  • Login
    •

    Client Side Validations

    Episode #32 by Teacher's Avatar David Kimura

    Previous (#31) Episode Next (#33)

    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.
    rails view javascript 5:26
    Mark as Watched Watch Later

    Resources

    Summary

    # Gemfile
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'

    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.rb
class 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

    # callbacks
window.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();
};