CSS - Pseudo-class :user-invalid

Quiz

The CSS pseudo-class :user-invalid is used for form elements that users have interacted with and whose values don't meet the specified validation criteria.

It targets elements that are marked as :invalid, :out of range, or empty but required after a user has attempted to submit the form but before interacting with the element again.

This pseudo-class is useful for identifying form elements with incorrect or missing data after user interactions.

Syntax

:user-valid {
   /* css declarations */
 }

CSS :user-valid Example

The following example demonstrates how to use the :user-valid pseudo-classes.

<html>
<head>
<style>
   input:user-invalid {
   border: 2px solid red;
   }
   input:user-invalid + span::before {
   content: "invalid ";
   color: red;
   }
</style>
</head>
<body>
   <form>
   <div>
   <label for="username">Username:</label>
   <input type="text" id="username" name="username" required pattern="[A-Za-z0-9]+">
   <span></span>
   </div>
   <br>
   <div>
   <label for="password">Password:</label>
   <input type="password" id="password" name="password" required>
   <span></span>
   </div>
   <br>
   <input type="submit" value="Submit">
   </form>
</body>
</html>

Print Page