Using jQuery validate plugin in Asp .Net to validate dropdownlist

The jQuery validate plugin can be used in HTML page validations. It can be easily integrated to ASP.Net forms validation as described below.

1. In the header (or in the content page if you are using master pages) put references for jQuery and jQery validator plugin.

2.In general it is recommended that you wire form validation in the DOM ready event of the jQuery. But if you are using update panels you should wire up these events in the pageLoad. In this example I am validation a dropdown list with a default value "(not set)".  This is achieved using the jQuery.validator.addMethod  as shown below.

        
              jQuery.validator.addMethod("defaultInvalid", function (value, element) {
                switch (element.value) {
                    case "(not set)":
                        if (element.name == "<%= ddlCountry.UniqueID %>") return false;
                        break;
                    default:
                        return true;
                        break;
                }
            });

3. Next include the controls to be validated in the form validate method. Remember to include the defaultInvalid: true attribute to validate the default value.

 $("#form1").validate({

                rules: {
                    "<%= ddlCountry.UniqueID %>": {
                        required: true,
                        defaultInvalid: true
                    }
                },
                messages: {
                    "<%= ddlCountry.UniqueID %>": "* Required"
                }
            });
4. Finally define the IsValid() that is called on Update click,

 function IsValid() {
            var isValid = $("#form1").valid();

            if (isValid) {
                return true;
            }
            return false;
   }
               

The trick is to call the IsValid function on the OnClientClick event of the Update button.