How to disable submit button AFTER browser has validated fields with 'required' attribute?

Question

We are using the following jQuery to disable submit buttons in order to prevent double submissions (slow server!).

jQuery(document).ready(function($){

    /*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {
        $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    });

});

However, how do we fire the script AFTER the browser has validated all fields with the 'required' attribute in our HTML form?

You would need an event listener that would create the disable button function after the browser has validated the fields. — Katrina, May 08 '15 at 14:43
How is the validation called? Ba some onSubmit handler? If so, please show this code — Axel Amthor, May 08 '15 at 15:32

Alfredo · Accepted Answer · 2015-05-09T13:56:29.447

EDIT: I found a much more elegant way to do this. Please accept this answer if it works for you.

 jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {

        var myform = $('#theform');

        //checks if the form is valid
        if(myform[0].checkValidity())
        {
             $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
        }
    });

});


//this is slightly awkward but it works

jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
$("input[type=submit]").click(function() {
    var flag = true;

    $('[required]').each(function(){
        if(!$(this).val()) 
           flag = false;
    });

    if(flag){
       $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    }
    else
       return false;
});

});

Thanks Alfredo. Changed your code a little to make it applicable to all forms: if($('form[0]').checkValidity()) — Richard Tinkler, May 11 '15 at 07:42

How to disable submit button AFTER browser has validated fields with 'required' attribute?

1 Answers1

Linked