Question

Can anyone tell me if they have been able to get the client_side_validation gem working within a reveal modal(Zurb Foundation).

I have a form that works well with client_side_validation but as soon as I put it in a reveal modal the validations no longer work.

(https://github.com/bcardarella/client_side_validations in a http://foundation.zurb.com/docs/reveal.php)

Thanks

Answer 1

Edited – This page may give some insight to others in future (I’ve not revisited this since I posted my first answer so I haven’t tested it) – Client Side Validations by default only validates visible fields, so as it says on this page, https://github.com/bcardarella/client_side_validations/wiki/Validation-in-Multi-Step-Form, you may have to tell it to validate your form with $(form_id).enableClientSideValidations();

I didn’t do that though, I loaded the whole thing in through ajax. Here’s some info which may help other people in this situation to get going.

Zurb’s Foundation framework’s standard modal window is simply a div on your page and a link that triggers js to switch between display:none/block. I don’t know why this prevents the client_side_validations gem from working as other js within reveal modals works fine. I piggy back on the styling of the reveal modal and its js, I just load the whole content in via ajax.

Just in case this will help someone in the future here’s what my basic set up looks like now. I have multiple links to my ajax and a single div which will become the modal. I do a quick check in my js.erb and swap out any previously rendered content (for the multiple links..)

#Populate div with a reveal modal containing a partial (a form, remember to put in the j in "j render") and if said modal already has content, ditch it.  

if( !$('#reveal-div').html().length ) {
$('#reveal-div').append('<%= j render :partial => 'form', :locals => { :some_locals => @whatever_values  } %><a class="close-reveal-modal">&#215;</a> ');
$('#reveal-div').addClass('reveal-modal').appendTo('body');
$('#reveal-div').reveal();
}
else{
$('#cbrform').remove();
$('#reveal-div').append('<%= j render :partial => 'form', :locals => { :some_locals => @whatever_values } %><a class="close-reveal-modal">&#215;</a>'); 
$('#reveal-div').reveal()};

#Make sure you get your validations working on remote loaded forms with this line
$('form[data-validate]').validate(); 

So by calling .reveal() on my form’s modal div and then calling .validate() I get my modal loaded in via ajax and I can dismiss it in the usual way. Rather than my form being loaded on the initial page load and then displaying it with js I load it all in with js, which let’s me follow the usual steps to get my validations running. That’s my new.js.erb there, you should be able to manage going forward with that (ie, you’ll need your link_to, a div to load that into – in this case that’s #reveal-div – and your appropriate controller actions).

Happy coading 😉