JSFiddle - React, Tailwind, and code Playground

by Oscar Daniel Requena Seijas

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://i.icomoon.io/public/temp/5e8da9aa50/UntitledProject/svgxuse.js"></script>
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/5e8da9aa50/UntitledProject/style-svg.css">
<input id="foo" pattern="[0-9]{4}" value="1234" />
<input id="bar" pattern="[0-9]{4}" value="ABCD" />
<script>
    document.getElementById('foo').validity.patternMismatch; //false
    document.getElementById('bar').validity.patternMismatch; //true
</script>
<p>

</p>
<input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" autofocus required>
<p>
<input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" autofocus required>
<span class="icon-validation" data-icon="&#xe000"></span> 
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark"></use></svg>
</p>
<p>
<input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" autofocus required 
       title="must be alphanumeric in 6-12 chars"> 
</p>

CSS

:valid {
    color: green;
} 
:invalid {
    color: red;
} 

@font-face {
    font-family: 'iconic';
    src: url('webfonts/iconic.eot');
    src: url('webfonts/iconic.eot?#iefix') format('embedded-opentype'),
         url('webfonts/iconic.svg#iconic') format('svg'),
         url('webfonts/iconic.woff') format('woff'),
         url('webfonts/iconic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:valid + .icon-validation::before {
    content: attr(data-icon);
    color: green;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}