Episodes

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();
};