JavaScript

Responde a eventos de formulario

Puedes usar JavaScript para responder a las interacciones de los usuarios en tu formulario, revelar campos adicionales, enviar un formulario y mucho más.

Ayuda a los usuarios a completar controles de formulario adicionales

Imagina que creaste un formulario de encuesta. Después de que un usuario selecciona una opción, querrás mostrar un <input> adicional para hacer una pregunta específica relacionada con la selección. ¿Cómo puedes mostrar solo el elemento <input> relevante?

Puedes usar JavaScript para revelar un <input> solo cuando el <input type="radio"> asociado está seleccionado actualmente.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Veamos el código JavaScript de la demostración. ¿Notaste los atributos aria-controls y aria-expanded? Usa estos atributos ARIA para ayudar a los usuarios de lectores de pantalla a comprender cuándo se muestra o se oculta un control de formulario adicional.

Asegúrate de que los usuarios puedan enviar un formulario sin salir de una página

Imagina que tienes un formulario de comentarios. Cuando un lector agrega un comentario y envía el formulario, lo ideal sería que pudiera ver el comentario de inmediato sin tener que actualizar la página.

Para lograrlo, escucha el evento onsubmit, usa event.preventDefault() para evitar el comportamiento predeterminado y envía el FormData con la API de Fetch.

Tu secuencia de comandos de backend puede verificar si una solicitud POST parece provenir del navegador (con el atributo action de un elemento de formulario, donde method="post") o de JavaScript, como una solicitud fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Siempre notifica a los usuarios de lectores de pantalla sobre los cambios de contenido dinámico. Agrega un elemento con el atributo aria-live="polite" a tu código HTML y actualiza el contenido del elemento después de un cambio. Por ejemplo, actualiza el texto a "Tu comentario se publicó correctamente" después de que un usuario envíe un comentario.

Obtén más información sobre las regiones activas de ARIA.

Validación con JavaScript

Asegúrate de que los mensajes de error se alineen con el estilo y el tono de tu sitio

La redacción de los mensajes de error predeterminados difiere entre los navegadores. ¿Cómo puedes asegurarte de que se muestre el mismo mensaje a todos los usuarios y de que este se alinee con el estilo y el tono de tu sitio? Usa el método setCustomValidity() de la API de Constraint Validation para definir tus propios mensajes de error.

Asegúrate de que los usuarios reciban notificaciones sobre los errores en tiempo real

Las funciones HTML integradas para la validación de formularios son excelentes para notificar a los usuarios sobre los campos de formulario no válidos antes de que los datos se envíen a tu backend. ¿No sería genial notificar a los usuarios en cuanto salgan de un campo de formulario?

Escucha el evento blur que se activa cuando un elemento pierde el foco y usa la interfaz ValidityState para detectar si un control de formulario no es válido.

Asegúrate de que los usuarios puedan ver la contraseña que ingresaron

El texto ingresado para <input type="password"> se oculta de forma predeterminada para respetar la privacidad de los usuarios. Ayuda a los usuarios a ingresar su contraseña mostrando un <button> para activar o desactivar la visibilidad del texto ingresado.

Prueba la demostración. Activa o desactiva la visibilidad del texto ingresado con Mostrar contraseña <button>. ¿Cómo funciona? Si haces clic en Mostrar contraseña, cambia el atributo type del campo de contraseña de type="password" a type="text", y el texto <button> cambia a "Ocultar contraseña".

Es importante que el botón Mostrar contraseña sea accesible. Conecta <button> con <input type="password"> con el atributo aria-controls.

Para notificar a los usuarios de lectores de pantalla si la contraseña se muestra o se oculta actualmente, usa un elemento oculto con aria-live="polite" y cambia su texto según corresponda. Es importante permitir que los usuarios de lectores de pantalla sepan cuándo se muestra una contraseña y si es visible para otra persona que mire su pantalla.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Obtén más información para implementar una opción para mostrar la contraseña.

Recursos

• FormData
• API de Constraint Validation
• <input type="password">