Question

i have some requiredfieldvalidators.

when i have a regular asp:button, all goes well.

But, now we’ve implemented the OnClientClick event on the submit button:

<asp:Button ID="SaveButton" runat="server" Text="Save changes" OnClick="SaveButton_Click" OnClientClick="return SubmitForm2();" />

the submitform2 method is implemented to set the caption of the submitbutton (please wait) and to disable it to avoid double clicking.

  function SubmitForm2() {
        $("#SaveButton").attr("disabled", "true");
        $("#SaveButton").val("Please wait...");

        __doPostBack("SaveButton", "");
        return true;

    }

but what we see is when we run this code, the clientsidevalidators are not called.

is that because we run the __doPostBack ourselves, that otherwise other code (to check the validators) is fired?

Answer 1

Yes – post-back is happening because you are doing __doPostBack by yourself. Once you disable the button, submit behavior by the button gets supressed blocking validators.

One of better implementation of desired functionality could be to set the js-timer for short duration for disabling button and then for longer duration for enabling the button. For example,

function SubmitForm2() {
        // disable button after 30 ms
        setTimeout(function() {
            $("#SaveButton").attr("disabled", "true");
            $("#SaveButton").val("Please wait...");

            // enable button in 15 seconds so that in case validations are 
            // failed, user can correct and re-submit the page.
            setTimeout(function() {
               $("#SaveButton").removeAttr("disabled");
               $("#SaveButton").val("Save");
            }, 15000); 

        }, 30);

        return true;
    }

Even better implementation can be achieved by using validator’s client side API. Here’s one such simpler but better modification of previous one,

function SubmitForm2() {
            // disable button after 30 ms
            setTimeout(function() {
                $("#SaveButton").attr("disabled", "true");
                $("#SaveButton").val("Please wait...");

                // enable button in 1 second in case validations are 
                // failed, user can correct and re-submit the page.
                setTimeout(function() {
                   if (!Page_IsValid) {
                      // validations failed
                      $("#SaveButton").removeAttr("disabled");
                      $("#SaveButton").val("Save");
                   }
                }, 1000); 

            }, 30);

            return true;
        }