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