Page Client side validation issue after postback

Question

I have a strange problem with Client Side validation after postback. I changed Combobox item that caused Selected Index event to fire(postback occurred). I clicked on 'Save' button after this event. Client side validation is not getting called instead it's calling server side btnSave_Click event. Client side validation works fine if I don't change ComboBox. I would like to validate page controls on client side before calling server side method. Please let me know.

    <asp:TextBox runat="server" ID="txtTitle" /> 
     <telerik:RadComboBox ID="RadComboBox1" runat="server" DataValueField="location_id"
                    DataTextField="description" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                    AutoPostBack="true" Width="250px" >
     </telerik:RadComboBox>

<asp:Button ID="btnSave" name="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" CausesValidation="true"/>

Code behind:

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        //some logic
    }

   protected void btnSave_Click(object sender, System.EventArgs e)
    {
         // save control values
    }

Client Script

<script type="JavaScript">
        $("#<%=btnSave.ClientID %>").click(function () {
            //  debugger;
            var valid = true;
            var errors = false;
            var msg;
            var msg = "<b>Please fill the Required fields:</b><br />";
            if ($("#<%= txtTitle.ClientID %>").val().length == 0) {
                msg += "Title is Required!\n";
                errors = true;
            }
            if(errors){
             alert(msg);
            }
        });
    });
</script>

Answer 1

Your javascript validation method is doing nothing to stop the postback event from triggering.

Try this:

<script type="JavaScript">
        $("#<%=btnSave.ClientID %>").click(function (evt) {
            //  debugger;
            var valid = true;
            var errors = false;
            var msg;
            var msg = "<b>Please fill the Required fields:</b><br />";
            if ($("#<%= txtTitle.ClientID %>").val().length == 0) {
                msg += "Title is Required!\n";
                errors = true;
            }
            if(errors){
             evt.preventDefault();
             alert(msg);
             return false;
            }
        });
    });
</script>

Answer 2

Because your form controls reside in an UpdatePanel, the postbacks are causing event handlers attached to those controls to be lost. Use jQuery's event delegation to ensure the events still trigger, even after partial postbacks.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Change your event handler attachment to something like this:

$('body').on('click', '#<%=btnSave.ClientID %>', function () {
    // rest of code
}

I used body as the initial selector, but you can choose any other selector that doesn't reside within the UpdatePanel.