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/

Raja · Accepted Answer · 2011-06-06 18:40:53Z

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

answered Jun 6, 2011 at 18:40

Raja

3,6383 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Homer Over a year ago

That would probably work, but I was hoping to avoid that. I've seen in some very old posts that there was to be a .refresh() method, but it's been removed

Raja Over a year ago

There are two gotchas in this docs.jquery.com/Plugins/Validation/… Fields with Brackets and dots and multiple forms. HTH

Homer Over a year ago

I don't think this applies. The controls don't have names and it's only 1 form.

Raja Over a year ago

then that could be a problem :-)....since it says "The name attribute is required for input elements, the validation plugin doesn't work without it."

Homer Over a year ago

Yeah, I thought about that after your post. I tried adding names, but it didn't seem to have any effect.

|

Homer · Accepted Answer · 2011-06-07 19:44:20Z

1

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/

answered Jun 7, 2011 at 19:44

Homer

7,91014 gold badges75 silver badges114 bronze badges

Comments

ocean4dream · Accepted Answer · 2013-01-23 04:25:11Z

0

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.

answered Jan 23, 2013 at 4:25

ocean4dream

5,2121 gold badge17 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery Validation plugin with dynamically added controls

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related