JQuery Validation Engine, doesn't live validate if i add a element after page was loaded?

Question

Hey,

at the moment i'm using this validation plugin: (http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/)

but when it comes to the part of validating i have a problem.

If i want to be able to validate a element which doesn't exist from the beginning, it only validates it when i press submit. But i want to be able that the element gets a validation while especially the focus get lost. on a element which is there all the time i can type, focus lost, and it writes "something wrong" and disapear if i changed the value to anything correct. but if i do the same thing on a element which i added with the jquery append function, it won't do anything until i press submit.

anyone a simple solution for this. perhaps with the jquery .live function?

this is my script:

var use_ajax=true;
$.validationEngine.settings={};

$("#contact-form").validationEngine({
    inlineValidation: true,
    promptPosition: "centerRight",
    success : function(){use_ajax=true},
    failure : function(){use_ajax=false;}
 })

and this is a sample of an element which get added by append:

<tr>
   <td><label for="email">Nummer</label></td>
   <td><input type="text" value="" id="nummer" name="nummer" class="validate[required]"></td>
   <td>&nbsp;</td>
</tr>

The accepted answer i had first, won't work with this:

      $("#contact-form").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "submit.php",
        ajaxSubmitMessage: "Contact saved succesful! <br> <img src=''/> <a href='test.php'>TestLink</a>",
        ajaxSubmitExtraData: "contact=john",
        success :  false,
        failure : function() {}
      });

any help for this problem?

Answer 1

This is normal.

When you bind the validation to your inputs, bindings for focus, blur etc are bound to the inputs. when you add an input item, they are not bound.

To bind them to, call the validation binding again after you added new inputs.

It might be so that the elements that were bound, will get second bindings, so you might have to unbind the validator:

$.removeData($('#my_form_id'),'validator');

and then bind it again

$('#my_form_id').validate()

@Edit to release any binds on an object, you can do .unbind() this is for events tough. I think jqtransform works on a class selector ? like class="jqtransform", you can try to remove that class