JavaScript

Cómo responder a eventos de formulario

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

Ayuda a los usuarios a completar controles adicionales del formulario

Imagina que creaste un formulario de encuesta. Después de que un usuario selecciona una opción, Quieres 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.

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

Analicemos las Código JavaScript para la demostración. ¿Ya viste los atributos aria-controls y aria-expanded? Usar estas opciones 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 abandonar 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 vieran de inmediato el comentario sin tener que actualizar la página.

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

Tu secuencia de comandos de backend puede verificar si una solicitud POST parece ser del navegador (mediante el atributo action de un elemento de formulario, en el que method="post") o desde 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 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 haya enviado un comentario.

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

Validación con JavaScript

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

La redacción de los mensajes de error predeterminados difiere de un navegador a otro. ¿Cómo puede asegurarse de que el mismo mensaje se muestre a todos los usuarios y de que el mensaje coincida con el estilo y tono de tu sitio? Usa la 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 integradas de HTML para la validación de formularios son excelentes para enviar notificaciones a los usuarios. por 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 tan pronto como abandonan un campo del formulario?

Escucha el blur evento que se activa cuando un elemento pierde el foco, y usa el 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"> está oculto de forma predeterminada. para respetar la privacidad de los usuarios. Ayuda a los usuarios a ingresar su contraseña mostrando una <button> para activar o desactivar la visibilidad del texto ingresado.

Prueba la demostración. Activar o desactivar el la visibilidad del texto ingresado mediante Show Password <button>. ¿Cómo funciona? Haz 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 el <button> con el <input type="password"> mediante el atributo aria-controls.

Para notificar a los usuarios del lector de pantalla si la contraseña está oculta o visible actualmente, haz lo siguiente: usa un elemento oculto con aria-live="polite" y cambia el texto según corresponda. Es importante permitir que los usuarios de lectores de pantalla sepan cuándo se muestra una contraseña y la puede ver otra persona que esté mirando la 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 de mostrar contraseña.

Recursos

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