JSFiddle - React, Tailwind, and code Playground

by Brynner

HTML

<form>
  <input type="text" pattern="[0-9]+" />
  <input type="text" pattern="[0-9]+" />
  <input type="text" pattern="[0-9]+" />
  <input type="submit" onclick="return false;" />
</form>

CSS

input.error {
  border: 1px solid red;
}

input.success {
  border: 1px solid green;
}

JavaScript

const inputs = document.querySelectorAll('input');

for(let input of inputs) {
	
  input.addEventListener('invalid', (event) => {
    input.classList.add('error');    
  }, false);

}