JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" pattern="\d+" required/>
<button id="check">check state</button>

CSS

input:required:valid {
    border: 1px solid green;
}

input:required:invalid {
    border: 1px solid red;
}

JavaScript

document.getElementById( 'check' ).addEventListener('click', function( e ) {
    var inp = document.getElementsByTagName( 'input' )[ 0 ];
    alert( inp.checkValidity() );
    alert( inp.validity.valid );
}, false);