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.

Since we are using validate: true within our form declaration, this will yield something like this:

<%= simple_form_for @something, html: {class: 'form-horizontal' }, validate: true do |f| %>
  ...
<% end %>

will produce

<form data-validate="true" ...>

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].

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