#32 Client Side Validations

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

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