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.






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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);