New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadButton Validation and Client-side Event Handlers

When the ASP.NET Validation is used along with a RadButton that has client-side event handler attached, an unexpected behavior may occur. The client-side script will be executed before the validation takes place, which is an expected behavior and can be observed with standard Button control as well. As a result the client's script logic won't be executed properly if it relies on postback of the page and the validation is not successful.

To avoid this effect, the client-side method Page_ClientValidate should be utilized. It forces the validation on the client and returns a boolean value, indicating whether it is successful. Using this value you can stop the execution of the client-side function in case the page is not validated. The following example shows how to achieve this.

As of Q2 2012 the client-side event OnClientClicking is raised after the validation of the page and calling the method Page_ClientValidate is no longer needed.

On the ASPX page markup below are added a TextBox, which is validated with RequiredFieldValidator. The page is submitted through aRadButton, that has postback confirmation executed on its OnClientClicking event:

<asp:TextBox ID="Textbox1" runat="server" />
<asp:RequiredFieldValidator ID="Requiredfieldvalidator1" ErrorMessage="Field is empty!"
        ControlToValidate="Textbox1" runat="server" ValidationGroup="Val" />
<br />
<telerik:RadButton RenderMode="Lightweight" ID="btnStandardConfirm" runat="server" Text="Standard window.confirm"
        OnClientClicking="StandardConfirm" ValidationGroup="Val">

Below is the JavaScript function, specified as handler of the OnClientClicking event.Note that before the main logic is executed, the Page_ClientValidate method is used in order to validate the page on the client. If the validation is successful, the confirm dialog is displayed:

    function StandardConfirm(sender, args) {
        var validated = Page_ClientValidate('Val');
        if (!validated) return;
        args.set_cancel(!window.confirm("Are you sure you want to submit the page?"));

See Also

In this article