Seudoclases :user-valid y :user-invalid

:user-valid

Navegadores compatibles

  • 119
  • 119
  • 88
  • 16.5

Origen

:user-invalid

Navegadores compatibles

  • 119
  • 119
  • 88
  • 16.5

Origen

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

Los selectores de seudoclases de interacción del usuario

Los selectores de seudoclases :user-valid y :user-invalid son similares a las seudoclases :valid y :invalid existentes. Ambos coinciden con un control de formulario en función de si su valor actual satisface sus restricciones de validación. Sin embargo, la ventaja de las nuevas seudoclases :user-valid y :user-invalid es que hacen coincidir un control de formulario solo después de que un usuario haya interactuado significativamente con la entrada.

Un control de formulario obligatorio y 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 seudoclases :user-valid y :user-invalid.

Usa estas seudoclases para aplicar diseño a controles de entrada, selección y área de texto, 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 una al lado de la otra para compararlas. En cada captura de pantalla se 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 las entradas del usuario. 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 seudoclase :invalid. La segunda captura de pantalla muestra el mismo formulario después de que un usuario proporciona una entrada para cada control. Los bordes de los controles se muestran en verde, y el texto de ayuda que aparece a continuación explica que cada control coincidirá actualmente con los selectores de seudoclases válidos y con el valor :valid. La tercera y última captura de pantalla muestra el mismo formulario después de que un usuario quita todas sus entradas. Los bordes de los controles son rojos, y el texto de ayuda que aparece a continuación explica que, actualmente, cada control coincidirá con los selectores de seudoclases :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 seudoclases, lograr la experiencia del usuario habilitada por :user-valid y :user-invalid requirió escribir código con estado adicional. Ese código debía realizar un seguimiento del valor inicial, el estado del enfoque actual de la entrada, la extensión de los cambios que el usuario realiza en el valor, ejecutar una verificación de validez adicional y, por último, agregar una clase para seleccionar para el estilo. Ahora puedes confiar en el navegador para controlar todo esto automáticamente.

Más recursos

Foto de portada de Behzad Ghaffarian en Unsplash.