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 seudoclase de interacción del usuario

Los selectores de seudoclase :user-valid y :user-invalid son similares a los las pseudoclases :valid y :invalid existentes. Ambos coinciden con un control de formulario basado en si su valor actual satisface las 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 haya comenzado 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 la entrada, la selección y los controles de área de texto, como se muestra a continuación 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>

Imagen que combina 3 capturas de pantalla, una al lado de la otra, 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 del control son grises, y el texto de ayuda a continuación explica que cada control coincidirá actualmente con el selector de seudoclase :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 las interacciones del usuario y la validación restricciones. Interactúa con la siguiente demostración para verlas en acción:

Mejor experiencia del usuario con menos código

Sin estas pseudoclases, lograr que la experiencia del usuario sea posible gracias a :user-valid y :user-invalid requerían escribir código con estado adicional. Ese código debía realizar 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 Quitar salpicaduras.