JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<input type="email" class="form-control equipCatValidation" id="equipCatagory" placeholder="0" name = "equipQuantityField">
<div class="maxQuantityMsg">
    Max quantity is 100 units
</div>

CSS

.maxQuantityMsg{
	color: red;	
}
.maxQuantity:focus{
border-color: red;
}

JavaScript

$('.maxQuantityMsg').hide();
$('.equipCatValidation').on('keydown keyup', function(e){
    if ($(this).val() > 100 
        && e.keyCode != 46 // delete
        && e.keyCode != 8 // backspace
    ){
        e.preventDefault();
        $(this).val("");
        $('.maxQuantityMsg').show();
        $(this).addClass('maxQuantity').focus();
    } else{
        $('.maxQuantityMsg').hide();
        $(this).removeClass("maxQuantity");
        $(this).attr("placeholder", "0");    
    }
});