JSFiddle - React, Tailwind, and code Playground

HTML

<input bar value="bar">
    
<input foo readonly value="foo">

CSS

input {
    background-color: red;
}
input:valid {
    background-color: green;
}

JavaScript

console.log('Is bar :valid ? ' + $('[bar]').is(':valid'));

console.log('Is foo :valid ? ' + $('[foo]').is(':valid'));