Client Side Validation & Confirmation for Telerik RadAjaxified Controls.

Scenario 1:

In your ASP.NET application using Telerik RadControls, you may need to perform some client side validations in the Client Click events and based on those validations you need to execute the server side code such as OnClick event of a button. 

In the normal scenario you write a code snippet which looks similar to the following code and it works well:

ASPX:
<asp:Button ID="btnSubmit" runat="server" Text="Save" OnClientClick="return validateFields();" OnClick="btnSubmit_Click" />

JavaScript:
<script type="text/javascript">
    function validateFields() {
        if (!somecondition) {
            return false;
        }
    }
</script>

But if the ASP button or Telerik RadButton is ajaxified using Telerik RadAjax you will see that the above code does not work as expected. You cannot find any syntax or logical issues and even if the client side validations are satisfied and the function returns true, still the server side OnClick event wont fire and you will be quiet confused.

Actually this is an exceptional case associated with the RadAjax. Here the issue is that the post-back is cancelled even if the JavaScript function returns true. So in this scenario the JavaScript function returning true though it seems intuitive doesn't behave as expected. when the button is AJAX-enabled by adding the necessary AJAX setting to RadAjaxManager or when the button is placed within a RadAjaxPanel control, you need to alter the Client Click a bit to get it worked as shown in the following code.

ASPX: 
<asp:Button ID="btnSubmit" runat="server" Text="Save" 
OnClientClick="if (!validateFields()) return false;" OnClick="btnSubmit _Click" />

JavaScript:
<script type="text/javascript">
    function validateFields() {
        if (someCondition) {
            return true;
        }
        else {
            return false;
        }
    }
</script>

Scenario 2:

The same issue can happen in a scenario where you may need to provide a confirmation dialog to the user and initiate an AJAX request if accepted.

Confirmation using standard post backs often looks like the following code which also won’t work with a radajaxified button. 

ASPX:
<asp:Button ID="btnDelete" runat="server" OnClientClick="return confirm('Are you sure?');" /> 

So you need to change the code a bit as shown below.

ASPX:
<asp:Button ID="btnDelete" runat="server" OnClientClick="if (!confirm('Are you sure?')) return false;" />

So this is one work around to get over this issue and alternatively you can hook to the OnRequestStart client-side event as shown in the following code in case if you have a more complex logic to implement.

JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function OnRequestStart(ajaxControl, eventArgs) {
            var eventTarget = eventArgs.get_eventTarget();
            if (eventTarget == "<%= btnDelete.UniqueID %>") {
            return confirm('Are you sure?');
        }
        else {
            return false;
        }
    }
    </script>
</telerik:RadCodeBlock>

Hope this article will be helpful to developers who are using Telerik RadAjax in their application. Please feel free to provide your healthy and valuable comments to improve the quality of this article.