Question

I have a site, which has a jQuery based slider Awkward Showcase.

In these slides I have a Rails form for new user registration. I’m using the client side validation gem for, well, client side validation.

The trouble is that because the form is on the second .showcase-slide, it does not exist in DOM when the page loads, and client side validation doesn’t work.

I need a way to use the hook found at client side validation’s GitHub page, to activate client side validations when my element is loaded.

So how do I use the hook $('form#user_new[data-validate]').validate(); on my form, which has an id of user_new, and isn’t loaded immediately and disappears from DOM when you change the showcase slide.

I tried several .live and .bind variations, but obviously my jQuery is very weak and I had no luck.

Help, please?

Update

I have tried this:

$("body").delegate("#user_username", 'focus', function(){
   $('form#user_new[data-validate]').validate()}); 

But now every time I click on the #user_username field, another validation gets added to the stack and I get multiple errors (clones) displayed for a single field.

Another update and an ugly solution

Ok, this is what I’ve come up with, but it sure is ugly. Any nicer solution is welcome!

$("body").delegate("#user_username", 'focus', function(){
  if ($('form#user_new[data-validate]').data('events') === undefined ) { 
    $('form#user_new[data-validate]').validate()  
  }});

Answer 1

This might be a little less chunky.

You will need to add a class (ie. “validateme”) to the field that you are focusing on though.

$("body").delegate("#user_username.validateme", 'focus', function(){
   $(this).closest('form').removeClass('validateme').validate();
}); 

This way the validation is only added when the element being focused has the validateme class. As soon as it is focused the class is removed and the validate is applied to the form.