JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<form target="#" onsubmit="return false;">
    <div id="d1">
    <input type="text" required id="i1" pattern="[0-9]" value="a">
    <button onclick="if (document.getElementById('i1').checkValidity()) {document.getElementById('d1').className = 'va'} else {document.getElementById('d1').className = 'in'}; return false;">Check 1</button>
    </div>
    <div id="d2">
    <input type="text" required id="i2">
    <button onclick="if (document.getElementById('i2').checkValidity()) {document.getElementById('d2').className = 'va'} else {document.getElementById('d2').className = 'in'}; return false;">Check 2</button>
    </div>
    <div id="d3">
    <input type="text" required id="i3">
    <button onclick="if (document.getElementById('i3').checkValidity()) {document.getElementById('d3').className = 'va'} else {document.getElementById('d3').className = 'in'}; return false;">Check 3</button>
    </div>
</form>

CSS

.in { background-color: #f00; }
.va { background-color: #0f0; }