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.

3 comments:

  1. TestMay 26, 2010 at 5:30 AM

    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 ;)

    ReplyDelete
  2. Suprotim AgarwalMay 26, 2010 at 7:38 AM

    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!

    ReplyDelete
  3. Monte KearleyJune 15, 2011 at 9:07 AM

    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);

    ReplyDelete