Validating Forms with Jquery
<p>I have a form with 4 dropdownlists whose autopostback property is set to true and each dropdown list gets populated based on the selection of the previous dropdownlist.
Ex. ddlCourseType gets populated after a selection is made in ddlCourseLevel and so on.</p>

<p>I need to validate every textbox and dropdownlist but am having a hard time with the dropdownlists because of its autopostback property.</p>

<p>It will be great if somebody could help me with the best way to validate this form or any tips or advice would be awesome. Thanks a lot. Below is the aspx file that has the jquery function for validating dropdowns and textboxes.</p>

<p><strong>Admin_Course_Edit.aspx</strong></p>

  

<pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
    &lt;script src="/JQuery_Plugins/timepicker/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="../JQuery_Plugins/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css"
        rel="stylesheet" type="text/css" /&gt;
    &lt;script type="text/javascript"&gt;
        $(function () {
            $('#tbStartDate').datepicker({
                duration: '',
                showTime: true,
                constrainInput: false
            });
        });
    &lt;/script&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="BreadCrumbs" runat="server"&gt;
    &lt;asp:SiteMapPath ID="SiteMapPath1" runat="server"&gt;
    &lt;/asp:SiteMapPath&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server"&gt;
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {

            //Function to Validate DatePicker
            $.validator.addMethod('isDate', function (value, element) {
                var isDate = false;
                try {
                    $.datepicker.parseDate('mm/dd/yy', value);
                    isDate = true;
                }
                catch (e) {

                }
                return isDate;
            });

            //Function to Validate DropDown Lists
            $.validator.addMethod('selectNone',
          function (value, element) {
              return this.optional(element) ||
                (value.indexOf("") == -1); //Leave it blank or enter the exact text in index 0
          }, "Please Select an Option");



            $("#form1").validate({
                // $("#tbStartDate").rules("add", {isDate: true} messages: {isDate: "Date to Validate is invalid."}

                rules: {
                    '&lt;%=ddlCourseLevel.UniqueID %&gt;': { selectNone: true },
                    '&lt;%=tbStartDate.UniqueID %&gt;': { required: true, isDate: true },
                    '&lt;%=tbCourseName.UniqueID %&gt;': { required: true, maxlength: 25 },
                    '&lt;%=tbPointScale.UniqueID %&gt;': { required: true, digits: true },
                    '&lt;%=tbDescription.UniqueID %&gt;': { maxlength: 50 }
                },
                messages: { '&lt;%=tbStartDate.UniqueID %&gt;': { isDate: "Please enter a Valid Date"} }


            });


            $("#imgBtn_A_save").click(function (evt) {


                // Validate the form and retain the result.
                var isValid = $("#form1").valid();

                // If the form didn't validate, prevent the
                //  form submission.
                if (!isValid)
                    evt.preventDefault();
            });

            $("#imgBtn_A_cancel").click(function () {
                $("#form1").validate().cancelSubmit = true;

            });
        });

        function HideLabel() {
            document.getElementById('&lt;%= lblMessage.ClientID %&gt;').style.display = "none";
        }
        setTimeout("HideLabel();", 2000);

    &lt;/script&gt;
    &lt;div class="Admin_rightNavtop"&gt;
        &lt;div class="title"&gt;
            &lt;asp:Label ID="lblTitle" Text="Edit Course" runat="server" class="titleLbl" /&gt;
        &lt;/div&gt;
        &lt;p align="center"&gt;
            &lt;asp:Label ID="lblMessage" runat="server" Style="color: Red" /&gt;&lt;/p&gt;
        &lt;!-- START TABLE ADD FORM--&gt;
        &lt;table style="margin-left: 70px"&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="LblCourseLevel" Text="* Course Level :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:DropDownList ID="ddlCourseLevel" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseLevel_SelectedIndexChanged"
                        AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourseLevel_Databound"
                        runat="server" /&gt;
                &lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="CourseType" Text="* Course Type :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:DropDownList ID="ddlCourseType" runat="server" class="ddlSize_large_addEdit"
                        OnDataBound="helperCourseType_Databound" EnableViewState="true" OnSelectedIndexChanged="ddlCourseType_SelectedIndexChanged"
                        AutoPostBack="true" /&gt;
                &lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblCourseName" Text="* Course Name :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:DropDownList ID="ddlCourseName" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseName_SelectedIndexChanged"
                        AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourse_Databound"
                        runat="server" /&gt;
                &lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblCourseName2" Text="* New Name :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="tbCourseName" class="tbSize_large_addEdit" runat="server" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblStartDate" Text="* Start Date :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="tbStartDate" runat="server" class="tbSize_large_addEdit" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblGraded" Text="* Grade Type :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:DropDownList ID="ddlGradeType" runat="server" class="ddlSize_large_addEdit"
                        OnSelectedIndexChanged="ddlGradeType_SelectedIndexChanged" AutoPostBack="true"&gt;
                        &lt;asp:ListItem&gt;---Select Grade Type---&lt;/asp:ListItem&gt;
                        &lt;asp:ListItem Value="1"&gt;Point Scale&lt;/asp:ListItem&gt;
                        &lt;asp:ListItem Value="2"&gt;Pass/Fail&lt;/asp:ListItem&gt;
                        &lt;asp:ListItem Value="3"&gt;Attendance&lt;/asp:ListItem&gt;
                        &lt;asp:ListItem Value="4"&gt;Not Graded&lt;/asp:ListItem&gt;
                    &lt;/asp:DropDownList&gt;
                &lt;/td&gt;

            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblPointScale" Text="* Point Scale :" runat="server" class="lblSize_largeGreen"
                        Visible="false" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="tbPointScale" runat="server" class="tbSize_large_addEdit" Visible="false" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Label ID="lblDescription" Text="Description :" runat="server" class="lblSize_largeGreen" /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;asp:TextBox ID="tbDescription" runat="server" class="tbSize_large_addEdit" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;!-- End of Table ADD COURSE--&gt;
    &lt;/div&gt;
    &lt;!-- End of rightNavTop--&gt;
    &lt;center&gt;
        &lt;div class="Admin_action"&gt;
            &lt;asp:ImageButton ID="imgBtn_A_save" ImageUrl="../Images/Save.png" OnClick="save_Click"
                runat="server" class="Admin_action_imgSize_small" /&gt;
            &lt;asp:ImageButton ID="imgBtn_A_cancel" ImageUrl="../Images/Cancel.png" runat="server"
                class="Admin_action_imgSize_small" CausesValidation="false"    OnClick="cancel_Click" /&gt;
        &lt;/div&gt;
    &lt;/center&gt;
    &lt;!-- End selection buttons--&gt;
&lt;/asp:Content&gt;
</code></pre>
