JSFiddle - React, Tailwind, and code Playground

HTML

<form>
		<p>
		<lable for="name">Enter your name:</lable>
		<input type="text" id="name" name="name">
		<span class="error"></span>
		</p>
		
		<lable for="age">Enter your Age:</lable>
		<input type="text" id="age" name="age" width="3">
		<span class="error"></span>
		</p>
            </form>

CSS

.error{
    color: red;
    display: inline;
}

JavaScript

$(document).ready(function(){
			
			
			
			$("input").focusin(function(){//highlight input field on focus
				$(this).css("background-color", "yellow");
			});
			$("input").focusout(function(){
				$(this).css("background-color", "white");
			});
	
			
			$("#name").keyup(function(){ //check against non-letter characters in name field
			
				var notLetter = /[^A-Za-z]/;
			
				if (notLetter.test($(this).val())){
					$(this).next(".error").text("Letters only please!");
				} else {
					$(this).next(".error").text("");
				}
			});
			
			$("#name").focusout(function(){//check that the field isn't empty
				
				if ($(this).val() == ""){
					$(this).next(".error").text("You forgot to enter your name!");
				} else  {
					$(this).next(".error").text("");
				}
			});
			
			$("#age").keyup(function(){//check against non-number characters in age
				
				var notNumber = /[^0-9]/;
				
				if (notNumber.test($(this).val()) != false){
					$(this).next(".error").text("Numbers only please!");
				} else {
					$(this).next(".error").text("");
				}
			});
			
			$("#age").focusout(function(){//check that the field isn't empty
				
				if ($(this).val() == ""){
					$(this).next(".error").text("You forgot to enter your name!");
				} else  {
					$(this).next(".error").text("");
				}
			});
		
		});