Как отключить/включить кнопку отправки после проверки jQuery?

Question

Я хочу отключить кнопку отправки формы после события «on_click», этот jscript делает это успешно, но когда неправильный адрес электронной почты проверяется с помощью jquery, а затем нажал кнопку отправки, после внесения исправления по электронной почте, кнопка все еще отключена. Как я могу это решить !?

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

Вы не можете отключить кнопку на click события; потому что если форма по-прежнему недействительна, когда вы нажимаете кнопку, вы не сможете ее снова щелкнуть. Вы можете только отключить его после форма успешно прошла проверку.

Используйте параметр плагина submitHandler для этого, так как он запускается нажатием одной кнопки только тогда, когда форма прошла проверку.

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

ПРИМЕЧАНИЯ:

1. $().ready(function() {...is not recommended as per jQuery documentation. Используйте вместо этого $(document).ready(function() {... или $(function() {....

2. Не обязательно использовать встроенный атрибут HTML required, если вы уже объявили правило required в пределах .validate().

3. Ваш submitHandler в пределах setDefaults() был сломан. Строка signupForm.submit() ничего не сделает, потому что signupForm - неопределенная переменная. Определите submitHandler в пределах .validate() и используйте аргумент form, предоставленный разработчиком.

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

Answer 2

Привязать к submit случае вместо того, чтобы на кнопку мыши.

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

Альтернативно сделать отключение в submitHandler опции плагина