Executing server validators first before OnClientClick Javascript confirm/alert

I got to answer a simple question over community forums.

Consider this: Suppose you are developing a webpage with few input controls and a submit button. You have placed some server validator controls like RequiredFieldValidator to validate the inputs entered by the user. Once user fill-in all the details and try to submit the page via button click you want to alert/confirm the submission like "Are you sure to modify above details?". You will consider to use javascript on click of the button.

Everything seems simple and you are almost done. BUT, when you run the page; you will see that Javascript alert/confirm box is executing first before server validators try to validate the input controls! Well, this is expected behaviour. BUT, this is not you want. Then?

The simple answer is: Call Page_ClientValidate() in javascript where you are alerting the submission. Below is the javascript example:

    <script type="text/javascript" language="javascript">
        function ValidateAllValidationGroups() {
            if (Page_ClientValidate()) {
                return confirm("Are you sure to modify above details?");
            }
        }
    </script>

Page_ClientValidate() function tests for all server validators and return bool value depends on whether the page meets defined validation criteria or not. In above example, confirm alert will only popup up if Page_ClientValidate() returns true (if all validations satisfy). You can also specify ValidationGroup inside this function as Page_ClientValidate('ValidationGroup1') to only validate a specific group of validation in your page.

        function ValidateSpecificValidationGroup() {
            if (Page_ClientValidate('ValidationGroup1')) {
                return confirm("Are you sure to modify above details?");
            }
        }

I have attached a sample example with this post here demonstrating both above cases. Hope it helps./.