Seudoclases :user-valid y :user-invalid

:user-valid

Navegadores compatibles

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origen

:user-invalid

Navegadores compatibles

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origen

La entrada del usuario es una de las preocupaciones más sensibles en cualquier interfaz de usuario. Una aplicación usable debe ayudar a los usuarios a ver, comprender y corregir cualquier error en su entrada. Los selectores de pseudoclases :user-valid y :user-invalid ayudan a mejorar la experiencia del usuario de la validación de entradas, ya que proporcionan comentarios sobre los errores solo después de que un usuario cambia la entrada. Con estos nuevos selectores, ya no es necesario escribir código con estado para hacer un seguimiento de la entrada que cambió un usuario.

Los selectores de pseudoclase de interacción del usuario

Los selectores de seudoclase :user-valid y :user-invalid son similares a las seudoclases :valid y :invalid existentes. Ambos coinciden con un control de formulario según si su valor actual satisface sus restricciones de validación. Sin embargo, la ventaja de las nuevas pseudoclases :user-valid y :user-invalid es que coinciden con un control de formulario solo después de que un usuario interactuó de forma significativa con la entrada.

Un control de formulario que es obligatorio y está vacío coincidirá con :invalid, incluso si un usuario no comenzó a interactuar con la página. Sin embargo, ese mismo control de formulario no coincidirá con :user-invalid hasta que el usuario cambie la entrada y la deje en un estado no válido.

Usa las pseudoclases :user-valid y :user-invalid

Usa estas pseudoclases para aplicar diseño a los controles de entrada, selección y textarea, como se muestra en los siguientes ejemplos:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

Una imagen que combina 3 capturas de pantalla en paralelo para compararlas. Cada captura de pantalla muestra un formulario web con los mismos controles de entrada, selección y área de texto. En la primera captura de pantalla, se muestra el formulario en su estado inicial antes de que el usuario ingrese datos. Los bordes de los controles son grises y el texto de ayuda que aparece a continuación explica que, actualmente, cada control coincidirá con el selector de pseudoclase :invalid. En la segunda captura de pantalla, se muestra el mismo formulario después de que un usuario proporcionó entradas para cada control. Los bordes del control son verdes y el texto de ayuda que aparece a continuación explica que, actualmente, cada control coincidirá con los selectores de pseudoclases :valid y :user-valid. En la tercera y última captura de pantalla, se muestra el mismo formulario después de que un usuario quitó toda su entrada. Los bordes del control son rojos y el texto de ayuda que aparece a continuación explica que, actualmente, cada control coincidirá con los selectores de pseudoclases :invalid y :user-invalid.

Los selectores coinciden en función de una combinación de interacciones del usuario y restricciones de validación. Interactúa con la siguiente demostración para verlos en acción:

Mejor experiencia del usuario con menos código

Sin estas pseudoclases, lograr la experiencia del usuario habilitada por :user-valid y :user-invalid requería escribir código con estado adicional. Ese código debía hacer un seguimiento del valor inicial, el estado de enfoque actual de la entrada, el alcance de los cambios del usuario en el valor, ejecutar una verificación de validez adicional y, por último, agregar una clase para seleccionar el diseño. Ahora puedes confiar en que el navegador se encargue de todo esto automáticamente.

Más recursos

Foto de portada de Behzad Ghaffarian en Unsplash.