El doble envío de formularios es un problema común en desarrollo web, ocurre cuando un usuario envía accidentalmente un formulario múltiples veces, lo que puede llevar a acciones no deseadas o errores en la aplicación. Veamos algunas técnicas para evitar este problema.

Prevenir doble envío con JavaScript

La solución al envío múltiple de un formulario consiste en detectar cuando se esta intentando enviar el formulario, guardar la intención de envío en una variable para que al segundo intento detengamos el envío del formulario si la variable ha sido modificada.

Entonces, primero creamos el formulario y le asignamos identificadores tanto al formulario como al botón de envío.

<form id="formRegister" action="#" method="POST">
    <label for="email">Correo electrónico:</label>
    <input type="text" id="email" name="email" required>
    <button type="submit" id="btRegister">Enviar</button>
</form>

Luego con JavaScript detectamos el evento submit del formulario, desactivamos y cambiamos el texto del botón de envío, guardamos el intento de envío en una variable. Finalmente, si se intenta enviar el formulario nuevamente usamos e.preventDefault() para prevenir el envío.

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('formRegister');
    const button = document.getElementById('btRegister');
    let isSubmit = false;

    form.addEventListener('submit', (e) => {
        if (isSubmit) {
            e.preventDefault();
        } else {
            button.disabled = true;
            button.textContent = 'Enviando...'
            isSubmit = true;
        }
    });
});

Con este script, evitaremos el envío múltiple del formulario.

Recomendaciones adicionales

Además de evitar el doble envío con JavaScript se debe complementar con otras técnicas:

• Usar tokens de un solo uso: Puedes generar un token único cada vez que se carga el formulario. Cuando se envía el formulario, el servidor verifica que el token sea válido y lo marca como usado para evitar envíos duplicados.
• Confirmación de envío: Mostrar una confirmación visual al usuario después de enviar el formulario puede ayudar a evitar que vuelva a enviarlo. Esto puede ser un mensaje emergente o una página de confirmación.
• Validaciones en el lado del servidor: Además de las validaciones en lado del cliente, es necesario tener validaciones en el lado del servidor. Esto implica verificar si los datos del formulario ya han sido procesados antes de realizar cualquier acción.

Al implementar estas técnicas, puedes reducir significativamente la posibilidad de doble envío de formularios y mejorar la experiencia del usuario en tu aplicación web.