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