JSFiddle - React, Tailwind, and code Playground

HTML

put letters in me and press tab:
<br />
<input type="number"/>
<br />
<p id="event" />
<p id="text" />

CSS

input:invalid {
    border-color: red;
}
input:valid {
    border-color: blue;
}

JavaScript

function checkValid(e) {
    var $this = $(this);
    $("#event").text(e.type + " " + this.innerHtml);
    $("#text").html("this.value: " + this.value + "<br />$(this).val(): " + $this.val() + "<br />$(this).is(:valid): " + $this.is(":valid") + "<br />$.isNumeric(this.value): " + $.isNumeric(this.value));
}

$('input[type="number"]').on('change', checkValid).on("keyup", checkValid);