How can I disable/enable submit button after jQuery Validation?

Question

I want to disable the submit button of the form after the "on_click" event, this jscript does it succesfully, but when a incorrect email is validated with jquery and then pressed the submit button, after I make the correction of the email, the button still is disabled. How can i solve this!?

Jscript:

<script src="js/libs/modernizr-2.6.2.min.js"></script>
<script src="lib/jquery-1.11.1.js"></script>    
<script src="lib/jquery.js"></script>
<script src="dist/jquery.validate.js"></script> 
<script>
$.validator.setDefaults({
    submitHandler: function() {
        signupForm.submit();
    }
});

$().ready(function() {
    //Desactiva el submit
    $(".submit").click(function () {
       $(".submit").attr("disabled", true);
       $('#signupForm').submit();
     });

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        wrapper: "div",
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            email: "Use una cuenta de correo v&aacute;lida",
            password: {
                required: "Ingrese su contraseña",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres"
            }
        }
    });


});
</script>

Form

    <form class="cmxform" id="signupForm" method="get" action="an-olvido-contrasena.asp">
    <input type="hidden" value="1" name="inicializar">
                    <p>
                    <div >
                    Correo electr&oacute;nico<br>
                    <input id="email" name="email" type="email" required placeholder="Tu correo electr&oacute;nico" <%if creado<>"1" then%>autofocus<%else%> value="<%=vEmail%>" <%end if%>><br>
                    </div>
                    <br>
                    <input class="submit" type="submit" value="Aceptar"><br>
                    </p>
    </form>

@Artemination.this is a good question.

Prince
– Prince

2018-08-25 13:31:12 +00:00
Commented Aug 25, 2018 at 13:31 — Prince
– Prince, Commented Aug 25, 2018 at 13:31

Sparky · Accepted Answer · 2015-09-17 02:58:46Z

You cannot disable the button on the click event; because if the form is still invalid when you click the button, you will not be able to click it again. You can only disable it after the form has successfully passed validation.

Use the plugin's submitHandler option for this as it's fired on a button click only when the form has passed validation.

<script>
$(document).ready(function() {

    $("#signupForm").validate({
        wrapper: "div",
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        messages: {
            email: "Use una cuenta de correo v&aacute;lida",
            password: {
                required: "Ingrese su contraseña",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres"
            }
        },
        submitHandler: function(form) { // <- pass 'form' argument in
            $(".submit").attr("disabled", true);
            form.submit(); // <- use 'form' argument here.
        }
    });

});
</script>

NOTES:

$().ready(function() {... is not recommended as per jQuery documentation. Use $(document).ready(function() {... or $(function() {... instead.
You do not need the required inline HTML attribute when you've already declared the required rule within .validate().
Your submitHandler within setDefaults() was broken. The signupForm.submit() line will do nothing because signupForm is an undefined variable. Define submitHandler within .validate() and use the form argument as provided by the developer.

DEMO: http://jsfiddle.net/6foLxzmc/13/

@Sparky.nice explanation.you have saved lot of time.thankyou

charlietfl · Accepted Answer · 2015-02-27 23:24:53Z

2

Bind to the submit event instead of to the button click.

$('#signupForm').submit(function(){
   $(this).find('.submit').prop('disabled',true);
});

Alternatively do the disabling in submitHandler option of plugin

answered Feb 27, 2015 at 23:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Sparky Over a year ago

Best to leave it to the submitHandler within the plugin. Otherwise, your submit() handler will interfere with or bypass validation entirely.

Anton Suslov · Accepted Answer · 2021-05-26 20:34:34Z

0

If you don't have an access to a form validation initialization this approach can help:

            jQuery('#form').on('submit', function () {
                if (jQuery(this).data('form_is_invalid')) {
                    jQuery(this).data('form_is_invalid', false);
                } else {
                    jQuery(this).find('.submit').prop('disabled', true);
                }
            }).on('invalid-form.validate', function () {
                jQuery(this).data('form_is_invalid', true);
            });

answered May 26, 2021 at 20:34

Anton Suslov

1035 bronze badges

Collectives™ on Stack Overflow

How can I disable/enable submit button after jQuery Validation?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related