JSFiddle - React, Tailwind, and code Playground

by girlie_mac

HTML

<h1>HTML5 Form Validation with pattern matching, with styles</h1>

<p>Username must be alphanumeric and 6 to 12 characters long.</p>

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" autofocus required>        
  <input id="submit" type="submit" value="create">   
</form>

CSS

/* When the pattern is matched */
input[type=text]:valid {
    color: green;
}

/* Unmatched */
input[type=text]:invalid {
    color: red;
}