Bootstrap Modal Validations

In this scenario, the following versions are being used. Based on your application and dependencies, the steps may vary.

• client_side_validations 9.3.4
• client_side_validations-simple_form 6.3.0
• rails 5.1.4
• bootstrap-sass 3.3.7
• simple_form 3.5.0

The problem with client side validations when using a bootstrap modal is that the validations are not triggered since the form fields are not visible. To get around this issue, you can add a listener for when the bootstrap modal is displayed and then enable validations on the form within the bootstrap modal.

We can create a universal enabler for our modals. We will check the class modal for whenever shown.bs.modal is triggered and call enableClientSideValidations() on form[data-validate].

# CoffeeScript
$(document).on 'shown.bs.modal', '.modal', ->
  $('form[data-client-side-validations]').enableClientSideValidations()

// JavaScript
$(document).on('shown.bs.modal', '.modal', function() {
  $('form[data-client-side-validations]').enableClientSideValidations();
});