JavaScript

Responde a eventos de formularios

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 los controles adicionales de formularios

Imagina que creaste un formulario de encuesta. Después de que un usuario seleccione 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 se selecciona el <input type="radio"> asociado.

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

Veamos el código JavaScript para 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 u 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 ver el comentario de inmediato sin 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 recuperación.

Navegadores compatibles

  • 42
  • 14
  • 39
  • 10.1

Origen

La secuencia de comandos de backend puede verificar si parece ser una solicitud POST del navegador (mediante el atributo action de un elemento de formulario, en el que method="post") o de JavaScript, como una solicitud fetch().

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

Notifica siempre a los usuarios de lectores de pantalla sobre los cambios en el 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 envía 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 según el navegador. ¿Cómo puedes asegurarte de que el mismo mensaje se muestre a todos los usuarios y de que este se alinee con el estilo y 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 de HTML integradas para la validación de formularios son excelentes para notificar a los usuarios sobre 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 abandonan un campo de formulario?

Detecta 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 que se ingresa para <input type="password"> se oculta de forma predeterminada a fin de 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 Show Password <button>. ¿Cómo funciona? Si haces clic en Mostrar contraseña, se 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 permitas el acceso al botón Mostrar contraseña. 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 muestra actualmente, usa un elemento oculto con aria-live="polite" y cambia su texto según corresponda. Es importante que los usuarios de lectores de pantalla sepan que una contraseña se muestra y es visible para 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 para mostrar contraseña.

Recursos