Using JQuery Validation plugin with ASP.NET

Ola — Thu, 09 Oct 2008 13:42:53 +0000

Like everyone else i’ve been playing around with JQuery alot latley. Asp.net and JQuery is not the best friends in the world but i guess it will be alot better when using ASP.NET MVC. Microsoft also annoncued that they will support JQuery natively in future versions. Nice!

If you want to learn more about ASP.NET and Jquery be sure to read both Rick Sthral’s and the Encosia blogs.

I’m working on a new project now where i am trying to stay away from asp.net ajax mainly because of performance reasons but also just because i want to learn something new. Today i’ve been using the JQuery Validation plugin.

There is alot of documentation of how to use it on the the documentation pages for the plugin but i want to share with you one thing that i had problems with.

This is some regular example code that all the sample’s use. The problem here is that for example “EmailTextbox” is not the ID of the control but the name.

$(document).ready(function() {
// validate signup form on keyup and submit
$("#aspnetForm").validate({
rules: {
OpenIdTextbox: "required",
NicknameTextbox: {
required: true,
remote: "resources/nickname.aspx"
},
EmailTextbox: {
required: true,
email: true
}
}
});
});

I scratched my head for a long long time when i used ctl00_ContentPlaceHolder1_EmailTextbox and nothing worked at all. So what you have to do is change this to something like this ..

$(document).ready(function() {
// validate signup form on keyup and submit
$("#aspnetForm").validate({
rules: {
ctl00$ContentPlaceHolder1$OpenIdTextbox: "required",
ctl00$ContentPlaceHolder1$NicknameTextbox: {
required: true,
remote: "resources/nickname.aspx"
},
ctl00$ContentPlaceHolder1$EmailTextbox: {
required: true,
email: true
}
}
});
});

You could of course also use some method that rewrite the Control.UniqueID to a name and use <%= %> to get the name of the control.

Codepolice.net » Form Validation

Using JQuery Validation plugin with ASP.NET