Using the jQuery Validation Plugin to Validate a DropDownList

Let us see how to use the jQuery Validation Plugin to validate a DropDownList. We will perform a validation where the user has to select an option before submit the form.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title>Validate a DropDownList</title>
<
style type="text/css">
label.error { float: none; color: red; padding-left: .2em; }
</style>
<
script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
</
script>

<
script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js">
</
script>
<
script type="text/javascript">
$.validator.addMethod('selectNone',
function(value, element) {
return this.optional(element) ¦¦
(value.indexOf("Select an option") == -1);
}, "Please select an option");

$(function(){
$("#form1").validate({
rules: {
'<%=DropDownList1.ClientID %>': {
selectNone: true
}
}
});
});
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<
asp:DropDownList ID="DropDownList1" runat="server"
AppendDataBoundItems="true">
<
asp:ListItem Text="Select an option"></asp:ListItem>
</
asp:DropDownList>
<
br /> <br />
<
asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</
div>
</
form>
</
body>
</
html>

Now if you browse the page and click on Submit without choosing an option, you get the following validation message

Validate DropDownList

Choosing an option removes the validation message and the form can now be submitted.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

3 comments:

Elijah Manor said...

You could also use the required validator if you set the "Value" attribute of your "Select an option" listitem to empty string

<asp:ListItem Text="Select an option" Value=""></asp:ListItem></code>

Then you can use the default required validator...

$(function () {
$("#form1").validate({
rules: {
'<%=DropDownList1.ClientID %>': {
required: true
}
},
messages: {
'<%=DropDownList1.ClientID %>': {
required: "Please select an option 2"
}
}
});

F.Y.I. Your example above has a typo & doesn't run. You need a "||" between "return this.optional(element) and the next statement in your selectNone anonymous function.

return this.optional(element) ||
(value.indexOf("Select an option") == -1);

Please excuse the bad formatting... the blogger comment system doesn't give me much room to format ;)

Suprotim Agarwal said...

Elijah: Thanks for the tip.

Btw, the || does not get printed in blogger. I had to edit the HTML and escape the characters for it to show up!

Monte said...

Thank you for posting, both solutions work.

I had a slightly different scenario where the DropDownList default selected item was a prompt with "-1" value:



This was generated in a server control so I couldn't change the initial value to null.

As it turns out, jQuery will pass the value, not the text into the selectNone validation method, so a simple tweak to Suprotim's code to get what I needed:

return this.optional(element) || (value != -1);