Add your own script in asp.net validation script when page is submitted

When we create a web page and use asp.net validator asp.net creates some javascript functions which is used to validate controls. Asp.net uses Page_ClientValidate() function to validate client side validators. Now if you want to do something before submitting this page (so if the page is valid to submit and all validator controls are vlaid) then you can do so by calling the Page_ClientValidate() method by yourself. Let assume the script below:

    <script type="text/javascript">

        function doSomethingBeforeSubmitting() {

            var isPageSubmitting = Page_ClientValidate();

            if (isPageSubmitting) {

            //write your code to do before page submitting.

            }

        }

    </script>

 

Now you can call this method on the client click event of an asp server side button as shown below:

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return doSomethingBeforeSubmitting();" />

May be till now to you have got nothing special. Let's make the things a bit interesting. Now lets say the page we are going to submit will take too long to submit. In that case to prohibit user to click on the submit button twice we need to disable the submit button when the page is going to be submit. Remember we don't need to disable the button if the page is not submitting because of asp.net validator control's validation failed. we can write this code as shown below:

 

    <script type="text/javascript">

        function doSomethingBeforeSubmitting() {

            var isPageSubmitting = Page_ClientValidate();

            if (isPageSubmitting) {

                var submitButton = document.getElementById('<%=btnSubmit.ClientID %>');

                submitButton.disabled = true;

            }

        }

    </script>

 

Now lets say after submitting the page the user is redirected to another page. If the user click on browser's back button to come back to this page then user may get the submit button disabled. To get rid of this problem you may think that we may write script on document's onload event to enable the button again. But when you come to page clicking browser's back button you may not get this event fired. In IE this event will be fired but in Firefox and others this event is not fired. So what you are going to do?

To get rid of this problem I had found a solution. I had written script on document's onunload event. I had enabled the button on this unload event. So before submitting the page the button was enabled again. So if user go back to the page using browser's back button he'll get the button enabled as I had already enabled the button before leaving the page. Here's the code block:

 

    <script type="text/javascript">

        window.onunload = "EnableSubmitButton";

        function EnableSubmitButton() {

            var submitButton = document.getElementById('<%=btnSubmit.ClientID %>');

            submitButton.disabled = false;       

        }

        function doSomethingBeforeSubmitting() {

            var isPageSubmitting = Page_ClientValidate();

            if (isPageSubmitting) {

                var submitButton = document.getElementById('<%=btnSubmit.ClientID %>');

                submitButton.disabled = true;

            }

        }

    </script>

 

Here in the above script I have registered EnabledSubmitButton method on window's onload event by the following:

window.onunload = "EnableSubmitButton";

 

So I did it in reverse way, rather than enabling the button on window's onload event, I enabled the button on button onunload event.