jQuery Validation plugin with dynamically added controls

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?

A开发者_运维问答lso, 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/

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

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/

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.