Disable Submit Button Only if page Validates

Question

I cannot get this to work for the life of me. I need the Submit button to disable only after all validation is complete and then for the page to post to the OnClick function.

I have a form filled with RequiredFieldValidators and a ValidationSummary. Right now it validates and the button gets disabled but the page doesn't continue to post, it just stays stuck on this state:

enter image description here

My button

<asp:Button ID="Button3" runat="server" OnClick="Submit_Form" CssClass="btn btn-primary"
                Text="Submit" OnClientClick="return disableOnSubmit(this);" />

JS to disable the button

<script type="text/javascript">
function disableOnSubmit(target) {
    if (typeof (Page_ClientValidate) == 'function') {
        if (Page_ClientValidate() == false) { return false; }
    }
        target.value = 'Please wait...';
        target.disabled = true;
        return true;
}
</script>

I am trying to prevent the user from submitting the form twice. The button should disable once they click it before it takes them to the next page.

are you stating this incorrectly..? do you mean you want the button to be disabled until all required fields have been filled / and or validated..? can you confirm..? — MethodMan, Oct 21 '14 at 21:45
No, the opposite, I want the button to be active and once all my required fields are filled out and the user hits the submit button it disables it in order to prevent them from submitting the form twice. — techora, Oct 21 '14 at 21:50
you need to have something like this inside of the asp:Button markup `OnClientClick="if(Page_ClientValidate(......` here is an example http://stackoverflow.com/questions/14490556/disable-webform-button-after-validation-and-before-postback — MethodMan, Oct 21 '14 at 21:54
I've tried that it is still stuck on the disabled button, page doesn't post. — techora, Oct 21 '14 at 22:00

Greg · Answer 1 · 2014-10-21T21:59:58.450

Well, I often utilize the Javascript Library Valid8. Saves some time for validation, otherwise what I would do would be something like this (Primitive Example):

<asp:LinkButton 
     Id="btnSubmit" runat="server"
     Text="Submit" CssClass="btn btn-Primary"
     OnClientClick="return Submit()" />

When the button is clicked it will call our function Submit.

function Submit() {
     var value = $("#txtField").Val();
     if(value != '') {
          if(!confirm("Are you sure you would like to submit?")) {
              return false;
          } else {
                return true; 
                // Be aware Link Button can have issue in Asp.Net sometimes.
          }
     }

So the validation occurs on the Client. Now you simply place this in your Page_Load:

btnSubmit.Click = new EventHandler("btnSubmit_Click");

Then place the data for the Postback in btnSubmit_Click like so:

protected void btnSubmit_Click(object sender, EventArgs e)
{
     // Do Something.
}

That is the approach I would do, mostly to avoid unwarranted Postbacks. Keep in mind my Javascript example is quite primitive, just ensures it isn't null.

Just read your hoping to avoid multiple submissions, you could do a Session Variable to avoid it or simply do:

if(Page.IsPostBack) 
{
     btnSubmit.Enabled = false;
}

Which would go on a Page_Load. Obviously any Postback though would instantly disable the button. So you might want to ensure that works in your implementation before actual implementation.

The only problem with this is you're asking me to rewrite the validation on all 30 fields that currently use RequiredFieldValidators. I'm not ready to give up on those yet. I will surely keep your suggestion in mind as a last resort. Thank you. — techora, Oct 21 '14 at 22:09
That isn't entirely true, you can add a `class` that applies to all thirty fields. Then loop through for validation. — Greg, Oct 21 '14 at 22:14

Disable Submit Button Only if page Validates

1 Answers1