单击提交按钮后如何禁用提交按钮

Question

I have created forms using php and using jquery for validation.What i exactly need is if validation successful on submit button, disable the submit button till submission gets over.Here is my code:

  if(document.location.pathname == "/contact-us"){
            $("#form-contact-user").validate({
                    ignore: [],
                    rules: {
                        name:{
                            required: true
                        },email: {
                            email: true
                        },
                        phne: {
                            phnDash: true
                        },
                        zip: {
                        zipcode: true
                        }
                    },
                    errorPlacement: function(error, element) {
                        if (element.attr("type") == "checkbox") {
                            error.appendTo( element.parent().parent().parent(".form-checkboxes"));
                        }
                        else if (element.attr("name") == "mailing_address") 
                        {
                         error.appendTo(element.parent().parent().parent());
                        }
                        else{
                            error.insertAfter(element);
                        }
                    }
            });

Answer 1

Try this:

 $('#btnId').attr('disabled', true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="submit" id="btnId" value="Submit"> 

Answer 2

According to the documentation you can use:

submitHandler (default: native form submit) :

Callback for handling the actual submit when the form is valid.

ANSWER UPDATED

From your comment:

Getting the following error:-Uncaught TypeError: Cannot read property 'call' of undefined

This message depends on your rules. Because I don't know anything about your html I can also assume a possible structure in the following snippet:

 $("#form-contact-user").validate({ debug: true, rules: { name: { required: true, minlength: 2 }, email: { required: true }, phone: { required: true }, zip: { required: true } }, errorPlacement: function (error, element) { if (element.attr("type") == "checkbox") { error.appendTo(element.parent().parent().parent(".form-checkboxes")); } else if (element.attr("name") == "mailing_address") { error.appendTo(element.parent().parent().parent()); } else { error.insertAfter(element); } }, submitHandler: function(form) { // do other things for a valid form $(form).find(':submit').prop('disabled', true); setTimeout(function() { form.submit(); }, 1000); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <form id="form-contact-user" method="get" action=""> <fieldset> <legend>Please provide your name, email address, phone number and zipcode</legend> <p> <label for="name">Name (required, at least 2 characters)</label> <input id="name" name="name" type="text"> </p> <p> <label for="email">E-Mail (required)</label> <input id="email" type="email" name="email"> </p> <p> <label for="phone">Phone Number (required)</label> <input id="phone" type="text" name="phone"> </p> <p> <label for="zip">Zip code (required)</label> <textarea id="zip" name="zip"></textarea> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> 

Answer 3

I hope this is what you are looking for,

 $('#submitBtn').click(function(event) { //event.preventDefault(); $(this).attr('disabled', true); //Perform Validation //if(valid) { // $("#form-contact-user").submit(); //} }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="submit" id="submitBtn" value="Submit">