How to 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 this successfully, but when the wrong email address is checked with jquery and then clicked the submit button, after making the correction by email, the button is still 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> 

The 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> 

Answer 1

You cannot disable a button in a click event; because if the form is still invalid when you click the button, you cannot click it again. You can disable it only after the form has successfully passed validation.

Use the submitHandler plugin submitHandler for this, since it is launched by clicking the button 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() {... not recommended according to jQuery documentation . Instead, use $(document).ready(function() {... or $(function() {...

• You do not need the embedded HTML required attribute if you have already declared the required rule in .validate() .

• Your submitHandler within setDefaults() been broken. The string signupForm.submit() will not do anything, because signupForm is an undefined variable. Define submitHandler inside .validate() and use the form argument provided by the developer.

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

Answer 2

Bind to the submit event instead of clicking a button.

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

Alternatively, disable the submitHandler parameter of the plugin.