JQuery común para deshabilitar botones de envío en todos los formularios después de la validación de HTML5

Perdóneme si es algo básico, porque soy un nuevo aprendiz de Javascript / jQuery. He estado intentando deshabilitar el botón Enviar para deshabilitar múltiples envíos. También he encontrado varias soluciones aquí, pero todas usan un nombre de formulario específico. Pero quería aplicar una solución global para todos los formularios en todas las páginas, así que no tengo que escribir código en cada página, así que puse esto en pie de página, por lo que todas las páginas tienen:

$('input:submit').click(function(){ $('input:submit').attr("disabled", true); }); 

Este código funciona en todos los formularios en todas las páginas como yo quería, pero si hay campos obligatorios HTML5 en forma y formulario que se envían sin ellos, por supuesto las notificaciones se revelan pero el botón aún se desactiva. Entonces, intenté con esto:

 $('input:submit').click(function(){ if ($(this).valid()) { $('input:submit').attr("disabled", true); $('.button').hide(); }); }); 

Pero esto no funciona. Amablemente ayúdame para que jQuery solo deshabilite cuando se complete toda la validación de HTML5. Gracias

Intenta eso y dejame saber:

 $('input:submit').click(function(){ if ($(this).closest("form").checkValidity()) { $('input:submit').attr("disabled", true); $('.button').hide(); }); }); 

Prueba esto

 `jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})` 

ejecutar este código en la validación exitosa del formulario

Es mejor adjuntar un controlador al evento de submit lugar de un evento de click , ya que el evento de submit solo se activa después de que la validación sea exitosa. (Esto le ahorra tener que verificar la validez usted mismo).

Pero tenga en cuenta que si un botón de envío está deshabilitado, entonces cualquier valor que puedan contener NO se envía al servidor. Entonces, debemos deshabilitarlos después del envío del formulario.

La pregunta está compuesta por el nuevo form atributo HTML5 que permite que las entradas asociadas estén en cualquier parte de la página, siempre y cuando el atributo de su form coincida con un ID de formulario.

Este es el fragmento de JQuery que uso:

 $(document).ready( function() { $("form").on("submit", function(event) { var $target = $(event.target); var formId = $target.attr("id"); // let the submit values get submitted before we disable them window.setTimeout(function() { // disable all submits inside the form $target.find("[type=submit]").prop("disabled", true); // disable all HTML5 submits outside the form $("[form=" + formId + "][type=submit]").prop("disabled", true); }, 2); // 2ms }); }); 

—[ ADVERTENCIA ]—

Si bien la desactivación de los botones de envío impide que se envíen múltiples formularios, los botones tienen el desafortunado efecto secundario de permanecer inhabilitado si el usuario hace clic en el botón [Back] .

Piense en este escenario, el usuario edita un poco de texto, hace clic en enviar (y se le redirige a una página diferente para ver las ediciones), vuelve a hacer clic para editar un poco más, … y … ¡no pueden volver a enviarlo!

La solución es (re) habilitar el botón de enviar en la carga de la página:

 // re-enable the submit buttons should the user click back after a "Save & View" $(document).ready( function() { $("form").each(function() { var $target = $(this); var formId = $target.attr("id"); // enable all submits inside the form $target.find("[type=submit]").prop("disabled", false); // enable all HTML5 submits outside the form $("[form=" + formId + "][type=submit]").prop("disabled", false); }); }); 

Ruprit , gracias por la propina. Tu ejemplo no funcionó para mí (en Firefox), pero me ayudó mucho.

Aquí está mi solución de trabajo:

 $(document).on("click", ".disable-after-click", function() { var $this = $(this); if ($this.closest("form")[0].checkValidity()) { $this.attr("disabled", true); $this.text("Saving..."); } }); 

Como checkValidity () no es una función jQuery, sino una función de JavaScript, debe acceder al elemento JavaScript, no al objeto jQuery. Esa es la razón por la cual tiene que haber [0] detrás de $ this.closest (“formulario”) .

Con este código solo necesita agregar una clase = “desactivar-después-hacer clic” al botón, entrada, enlace o lo que sea que necesite …