JSFiddle - React, Tailwind, and code Playground

HTML

<input id='frName' type='textbox' /> <span id="firstNameErrorMsg"/>

CSS

input {
 margin: 4px;   
}

.error{
 color:red;   
}

JavaScript

$(function() {
    $("#frName").blur(function(){
       validateFrName(); 
    });
});
function validateFrName(){
        $("#firstNameErrorMsg").text("");
        var firstName = $("#frName").val();

        if (firstName.indexOf("1")>0){
            $("#frName").addClass("error");
        $("#firstNameErrorMsg").text("First name can only contain letters.");
        $("#firstNameErrorMsg").addClass("error");
        return false;

    } else if (firstName .length <3){
            $("#frName").addClass("error");
        $("#firstNameErrorMsg").text("Please enter your first name.");
        $("#firstNameErrorMsg").addClass("error");
        return false;
    }else{
            $("#frName").removeClass("error");
        $("#firstNameErrorMsg").text("OK");
        $("#firstNameErrorMsg").removeClass("error");
        return true;
    }
}