Unobstructive client side validation for dynamically added input fields

Question

I followed this excellent post for generating dynamic controls in my mvc3 app.

And now I am trying to do client side unobstructive validation for phonenumber field. So I added 'Required' attribute on the 'PhoneNumber' property.

The unobstructive validation works for the phonenumber fields which are generated/rendered by the server (i.e. on pageload). But it doesnt works for the fields that are dynamically added by javascript method.

I know that I need to write some jquery code to add the rules/adapters or anything which notifies the browser that the dynamically added phonenumber fields needs to be validated. Please help me how to proceed.

Thanks, M

Answer 1

You should reparse the validation rules for all dynamically added elements:

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

Answer 2

the following validation plugin might help you

http://docs.jquery.com/Plugins/Validation

Also the the examples listed at the end of the page to get idea about how to use them effectively...

You need to add the class for the fields you want to validate.....

also you can provide inputmask for phone no, credit card no, etc....