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

---

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.

---

I'm using rails 3.2.8, simpleForm 2.0.2, client_side_validations 3.2.0.beta.4 and client_side_validations-simple_form 2.0.0.beta.1 and the above solution works well but the solution is incomplete, because when the validations are rebound (you change tab and back) if you trigger the error in same form with same field several times, the string error is duplicated, tripled, and so on.

So for this particular field you must add in your js.coffee file a "span eraser" since client_side_validations adds a span every time and you want only see the last one.

The complete solution is (put code into your *.js.coffee file):

# the above suggested works well
$("body").delegate "#user_name", "focus", ->
  $(this).closest("form").removeClass("validateme").validate()

# my additional code
$("#user_username").live "blur", ->
  $(@).siblings("span:not(:last)").remove()
  # $(@).siblings()  is identical to  $(@).parent().children() except @
  # in other words, select my "brothers" except me if yes or not match the selector
  # (nicer!)

This is an example; if your case is different check the HTML generated and play with the selectors.