JSFiddle - React, Tailwind, and code Playground

by Thoriq Firdaus

HTML

<p>
  Expect: 123
  Error: 1234
</p>
<form>
  <label for="number">Number</label>
  <input id="number" pattern="[0-9]{3}" />
</form>

JavaScript

const number = document.querySelector('#number');
number.addEventListener('blur', function(event) {
  	this.style = !event.target.checkValidity() ? "border: 1px solid red" : ''; 
});