jQuery Validation plugin with dynamically added controls

Question

In ASP.Net, I'm adding controls dynamically using jQuery.tmpl.

I'm initializing the validator in the $(document).ready() function with $("#form1").validate();, my dynamic controls have class="required", and I'm calling $("#form1").valid() on a click event.

Static controls on the page validate, but controls added dynamically do not. What's wrong here?

Also, the dynamic controls make the validator act weird, showing and hiding the validation message as I click on different controls.

Example: http://jsfiddle.net/wY6xt/2/

Answer 1

Are you adding rules to the controls which you add dynamically? Check out this link. Given below is the way to do it. I think since controls are added on the fly it is not able to associate the rules (in your case classes) to the controls (I am not so sure but I think it is worth a try).

$("#txtEmail_1").rules("add", "required");

HTH

Answer 2

The problem is that the plug-in requires controls being validated to have unique names. The controls being added here all have the same name so the plug-in is acting crazy.

Here is the example fixed to work with unique names: http://jsfiddle.net/wY6xt/3/

Answer 3

I had the same problem. Jquery validation cannot be applied to dynamic controls added on the fly due to the unique name/id constraint. My solution is to a special class name to your dynamic control and use the class name to validate. In your question your dynamic control has a class name "required", so you can do the following,

$(.required).each(function(){ $(this).rules('add', {required:true, messages:{required: 'Required Field'}});});

It works for me. Hope it can help you also.