JSFiddle - React, Tailwind, and code Playground

by Joe DF

HTML

<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
<div id="throwEx"/>

JavaScript

$("#throwEx").hide();
$("#textbox").keyup(checkForm).focus(checkForm);

function checkForm() {
    var needle = /^([a-zA-Z0-9]+)$/;
    var inputVal = $("#textbox").val();
    
    if (inputVal == '') {
        $("#change").addClass("button-disabled").removeClass("button");
        $("#change").attr("disabled", "disabled");
        $("#throwEx").hide();
    }
    else if (!needle.test(inputVal)) {
        $("#change").addClass("button-disabled").removeClass("button");
        $("#change").attr("disabled", "disabled");
        $("#throwEx").text("Error: Only Alphanumeric characters are allowed...");
        $("#throwEx").show();
    } else {
        $("#change").removeClass("button-disabled").addClass("button");
        $("#change").removeAttr("disabled");
        $("#throwEx").hide();
    }
}