JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type='checkbox' id='chx' />
    <label for='chx'>Use timeout?</label>
    <br />
    Status: <span id="lbl">Ok</span>
    <br />
    checkValidity(): <span id="lbl2"></span>       
    <br />    
    <input type="text" id="id" placeholder="Number" />					
    <button type="submit">Send</button>            
</form>

CSS

.failed
{
    color: red;
}

JavaScript

var lbl = $("#lbl");
var target = $("#id")[0];

$("form").submit(function(){
    return false;
});

$("button").click(function (){                
    var useTimeout = $("#chx").is(":checked");         
    
    lbl.text("processing...");
    lbl.removeClass("failed");
    target.setCustomValidity('');    
    showValidity();                
    
    if (useTimeout)
    {
        setTimeout(function() {
            lbl.text("invalid!");
            lbl.addClass("failed");
            target.setCustomValidity('failed!');
            showValidity();            
        }, 1000);
    }
    else {
        lbl.text("invalid without timeout!");
        lbl.addClass("failed");
        target.setCustomValidity('failed!');
        showValidity();            
    }
});

function showValidity() {                    
    $("#lbl2").text(target.checkValidity());
};