asp.net postback prevented after clientside validation

Question

I have an asp.net form which contains a dropdownlist which posts back to the server on change and populates second dropdownlist with some dates.

The form also contains other fields some of which are validated clientside and some server side.

Here's the problem I'm having. If I get a clientside validation error then try to change the dropdownlist, the second dropdown does not get populated. If I then change the first dropdownlist again, it works as expected.

Here's my submit button:

<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="Page_ClientValidate(); return checkPassengers();" OnClick="Page_Transfer" ValidationGroup="FormSubmit" />

Here's my clientside validation:

function checkPassengers() {
    if($("#testField").val() == "Name *" || $("#testField").val() == "") {
            $("#pltester").prepend("<p class='fillall'>Please fill in all fields marked with *</p>");
            return false;       
    }
};

Dropdowns:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddl1st" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:DropDownList ID="ddl1st" Width="190" AutoPostBack="true" OnSelectedIndexChanged="ChooseDates1st" runat="server" />
        <asp:DropDownList ID="ddlDepart1st" AutoPostBack="true" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

I've ran into this problem many times before when using updatepanels.

I've found that if the field needs to be validated then you have to actually set CausesValidation="true" on the element for it to still work with updatepanels.

Hope this helps you out!

Answer 2

Simply setting CausesValidation="true" did not resolve the issue for me. This appears to be issue when using asp dropdownlist's SelectedIndexChange event. The workaround I found was to reset the validation on front end with a js by validating non-existing validation group name before the postback.

function ignoreValidation() {
            if (typeof Page_ClientValidate != 'undefined') {
                Page_ClientValidate('reset-validation');
                Page_BlockSubmit = false;
            }
            return true;
}

And for dropdownlist

<asp:DropDownList CausesValidation="false" onchange="ignoreValidation();" runat="server" ID="CustomerDropDownList" OnSelectedIndexChanged="LoadCustomers" AutoPostBack="true"/>

Answer 3

If the Drop-Down list doesn't need to be validated, you can set CausesValidation="false" on the initial dropdown list. This will cause it not to trigger validation, so it can be changed at will.

Alternatively, you could put the DropDownList in a different ValidationGroup so that changing it doesn't trigger validation on the other controls.

Answer 4

function validateCommand(group) {
        if (typeof (Page_ClientValidate) == 'function') {
            Page_ClientValidate(group);
            if (Page_IsValid) {
                Page_BlockSubmit = !confirm('Are you sure?');
            }
        }
    }