JSFiddle - React, Tailwind, and code Playground

by girlie_mac

HTML

<h1>HTML5 Form Validation with pattern matching, with custom inline error message</h1>

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

<form>
    <label for="username">Username:</label><br/>
  <input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" autofocus required title="must be alphanumeric in 6-12 chars">        
  <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;
}