JSFiddle - React, Tailwind, and code Playground

by Suyog

HTML

<div id="main" role="main">
                Input a 4-digit: <input type="text" class="validateYearTextBox" />
            </div>
<div id="alert"></div>

JavaScript

function checkValidInput() {
    $(".validateYearTextBox").keydown(function(event) {       
        if (!((event.keyCode == 46 || 
            event.keyCode == 8  || 
            event.keyCode == 37 || 
            event.keyCode == 39 || 
            event.keyCode == 9) || 
            $(this).val().length < 4 &&
            ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105)))) {
            			// Stop the event
            			event.preventDefault();
            			return false;            			
            }
			
			// count number of characters entered
			var cs = $('.validateYearTextBox').val().length;
			if(cs == 3)
			{
				$('#alert').html('valid'); 
			}
			else
			{
				$('#alert').html(''); 
			}
    });
}
$(document).ready(function() {
		
    checkValidInput();
});