validacion - validar formulario html javascript

¿Cómo evitar que el formulario se envíe varias veces desde el lado del cliente?

Question

A veces, cuando la respuesta es lenta, uno puede hacer clic en el botón de enviar varias veces.

¿Cómo prevenir que esto suceda?

Answer 1

Aquí hay una manera simple de hacerlo:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Answer 2

Deshabilite el botón de enviar pronto después de un clic. Asegúrese de manejar las validaciones correctamente. También mantenga una página intermedia para todas las operaciones de procesamiento o base de datos y luego redirija a la página siguiente. Esto asegura que la actualización de la segunda página no haga otro procesamiento.

Answer 3

El control de envío del formulario del lado del cliente se puede lograr de forma bastante elegante haciendo que el controlador onsubmit oculte el botón de envío y lo reemplace con una animación de carga. De esta forma, el usuario obtiene retroalimentación visual inmediata en el mismo lugar donde ocurrió su acción (el clic). Al mismo tiempo, evita que el formulario se envíe en otro momento.

Si envía el formulario a través de XHR, tenga en cuenta que también debe manejar los errores de envío, por ejemplo, un tiempo de espera excedido. Debería volver a mostrar el botón Enviar porque el usuario debe volver a enviar el formulario.

En otra nota, llimllib trae un punto muy válido. Toda validación de formulario debe ocurrir en el lado del servidor. Esto incluye múltiples controles de envío. ¡Nunca confíes en el cliente! Esto no es solo un caso si javascript está deshabilitado. Debe tener en cuenta que todo el código del lado del cliente se puede modificar. Es algo difícil de imaginar, pero el html / javascript que habla con su servidor no es necesariamente el html / javascript que ha escrito.

Como sugiere llimllib, genere el formulario con un identificador que sea único para ese formulario y póngalo en un campo de entrada oculto. Almacene ese identificador. Al recibir datos del formulario, solo trábelo cuando el identificador coincida. (También vincula el identificador a la sesión de los usuarios y lo combina, también, para mayor seguridad.) Después del procesamiento de datos, elimine el identificador.

Por supuesto, de vez en cuando, debe limpiar los identificadores para los que nunca se envió ningún dato de formulario. Pero muy probablemente su sitio web ya emplea algún tipo de mecanismo de "recolección de basura".

Answer 4

Esto funciona muy bien para mí. Envía la granja de servidores y el botón de habilitar y luego de 2 segundos activa el botón.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById(''submit'')
setTimeout(function() {
    btn.setAttribute(''disabled'', ''disabled'');
}, 1);

setTimeout(function() {
    btn.removeAttribute(''disabled'');
}, 2000);}

En ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById(''submit'');

setTimeout(() => { submitBtn.setAttribute(''disabled'', ''disabled'') }, 1);

setTimeout(() => { submitBtn.removeAttribute(''disabled'') }, 4000);}

Answer 5

Hacer esto usando javascript es un poco fácil. A continuación está el código que dará la funcionalidad deseada:

$(''#disable'').on(''click'', function(){
    $(''#disable'').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Answer 6

Hash la hora actual, convertirla en una entrada oculta en el formulario. En el lado del servidor, verifique el hash de cada envío de formulario; si ya has recibido ese hash, entonces tienes un envío repetido.

editar: confiar en javascript no es una buena idea, por lo que todos pueden seguir votando esas ideas, pero algunos usuarios no lo habilitarán. La respuesta correcta es no confiar en la entrada del usuario en el lado del servidor.

Answer 7

Intenté la solución de vanstee junto con la validación no intrusiva de asp mvc 3, y si la validación del cliente falla, el código aún se ejecuta y el envío de formularios se deshabilita para siempre. No puedo volver a enviarla después de corregir los campos. (ver el comentario de bjan)

Así que modifiqué el guión de vanstee así:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Answer 8

La mayoría de las soluciones simples es que desactiva el botón al hacer clic, habilítelo después de que la operación se complete. Para verificar una solución similar en jsfiddle:

[click here][1]

Y puedes encontrar alguna otra solución en esta answer .

Answer 9

La mejor manera de evitar el envío múltiple es pasar el ID del botón en el método.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Answer 10

La respuesta más simple a esta pregunta es la siguiente: "A veces, cuando la respuesta es lenta, uno puede hacer clic en el botón Enviar varias veces. ¿Cómo evitar que esto suceda?"

Simplemente desactive el botón de envío de formulario, como el código siguiente.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Deshabilitará el botón de enviar, al hacer clic primero para enviar. Además, si tiene algunas reglas de validación, funcionará bien. Espero que ayude

Answer 11

La solución más simple y elegante para mí:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Enlace para más ...

Answer 12

Puede evitar el envío múltiple simplemente con:

var Workin = false;

$(''form'').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Answer 13

Puedes probar safeform jquery plugin.

$(''#example'').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform(''complete'');
        return false;
    }
})

Answer 14

Sé que etiquetó su pregunta con ''javascript'', pero aquí hay una solución que no depende en absoluto de javascript:

Es un patrón de aplicación web llamado PRG , y aquí hay un buen artículo que lo describe

Answer 15

Solo para agregar a las posibles respuestas sin pasar por la validación de entrada del navegador

$( document ).ready(function() {
    $(''.btn-submit'').on(''click'', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Answer 16

También podría mostrar una barra de progreso o una rueda giratoria para indicar que el formulario está procesando.

Answer 17

Usando JQuery puedes hacer:

$(''input:submit'').click( function() { this.disabled = true } );

&

   $(''input:submit'').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Answer 18

Use este código en su formulario. Manejará múltiples clics.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

funcionará seguro

Answer 19

Utilice javascript discreto para deshabilitar el evento de envío en el formulario una vez que ya se haya enviado. Aquí hay un ejemplo usando jQuery.

EDITAR: Se corrigió el problema con el envío de un formulario sin hacer clic en el botón Enviar. Gracias, ichiban

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Answer 20

En el lado del cliente , debe deshabilitar el botón de enviar una vez que el formulario se envía con código de JavaScript como el método proporcionado por @vanstee y @chaos.

Pero existe un problema para la demora de red o la situación de javascript-disabled donde no debe confiar en el JS para evitar que esto suceda.

Por lo tanto, en el lado del servidor , debe verificar el envío repetido de los mismos clientes y omitir el repetido, que parece ser un intento falso del usuario.

Answer 21

<form onsubmit="if(submitted) return false; submitted = true; return true">