JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Alphanumeric only example</h2>
User: <input type="text" id="user" name="user" />
<div id="infoUser"></div>
CSS
#infoUser {
color: red;
font-weight: bold;
padding-top: 10px;
}
JavaScript
$("#user").keyup(function(e){
var str = $.trim( $(this).val() );
if( str != "" ) {
var regx = /^[A-Za-z0-9]+$/;
if (!regx.test(str)) {
$("#infoUser").html("Alphanumeric only allowed !");
}
else{
$("#infoUser").html("");
}
}
else {
//empty value -- do something here
$("#infoUser").html("");
}
});