JSFiddle - React, Tailwind, and code Playground

by Martin_ATS

HTML

<p>
HTML5 <i>&lt;input type='<b>number</b>'&gt;</i> elements do not trigger a change event when changing from blank to invalid text input such as 'abc'.  However, you can detect the change (approximately) by testing whether the HTML5 validity has changed on blur.
</p>
<form id="f1" method="get" action="#">
	<p>
        This HTML5 type="number" input does <b>not</b> have a 'blur' event handler attached.
		<input id="inp0" type="number" step="1" min="0" max="3000" style="color: blue;" />
	</p>
    <p>
		This HTML5 type="number" input detects validity changes on blur:
		<input id="inp1" type="number" step="1" min="0" max="3000" style="color: blue;" />
	</p>
</form>
<button onclick="javascript:clear();">Clear</button>
<p id="dbg"></p>

JavaScript

$(function () {
    
    // initialize state for prior validity
    $("input[type='number']").each(function() {
        $(this).data('H5valid', this.checkValidity());
    });
    
    // bind blur event
    $("#inp1").bind('blur', function () {
        $("#dbg").append("#inp1 blur event<br/>");
        if ($(this).data('H5valid') != this.checkValidity()) {
            // fire change event since validity has changed
            $(this).trigger('change');
        }
    });
    
    // bind change event
    $("input[type='number']").bind('change', function () {
        var myId = $(this).attr("id");
        $("#dbg").append("#" + myId + " current value = '" + $(this).val() 
            + "'.  HTML5 validity = " + this.checkValidity() 
            + ". Previous validity = " + $(this).data("H5valid") + "<br/>");
        $(this).data('H5valid', this.checkValidity());
    });
    
});

function clear() {
    //$("#dbg").append("test1()<br/>");
    $("#dbg").text('');
}