F9Formularios que se envían o cambian de página al salir de un campo

Por qué es importante

Quien usa el teclado sale de cada campo con Tab, simplemente para avanzar. Si en ese momento el formulario se envía, lo hace a medias y la persona no sabe qué ha pasado.

Quien usa un lector de pantalla puede perder el hilo cuando la página cambia de repente. Las personas con dificultades cognitivas o que necesitan repasar lo escrito también se desorientan. El criterio 3.2.5 (nivel AAA) pide que estos cambios solo ocurran a petición del usuario.

Cómo evitarlo

1. Envíe el formulario solo con un botón de envío (<button type="submit">).
2. No asocie a los eventos blur o focusout acciones como form.submit(), window.open() o un cambio de location.
3. Al salir de un campo sí puede revisar lo escrito y mostrar un aviso de error junto a él. Eso no cambia de página ni mueve el foco.
4. Si la página debe actualizarse con lo elegido, como los filtros de un buscador, añada un botón «Aplicar».

Cómo comprobarlo

1. Rellene el formulario solo con el teclado. Pase de un campo a otro con Tab y Mayús+Tab.
2. Compruebe que al salir de cada campo no se envía el formulario, no se abre otra ventana o pestaña y no se carga otra página.
3. Repita la prueba con el ratón, haciendo clic fuera de cada campo.
4. En el código, busque funciones asociadas a blur, focusout u onblur y revise qué hacen.

Ejemplo

Buscador de oficinas por código postal: primero el error y después la forma correcta.

<!-- Mal: al salir del campo se envía el formulario -->
<input id="cp" name="cp" onblur="this.form.submit()">

<!-- Bien: se envía solo al pulsar el botón -->
<label for="cp">Código postal</label>
<input id="cp" name="cp" autocomplete="postal-code">
<button type="submit">Buscar oficinas</button>