JSFiddle - React, Tailwind, and code Playground

HTML

<form id='customForm'>
	<div>
		<label for='name'>Name </label>
		<input type='text' id='name' name='name'  />
		<span id='nameInfo'>Please type a valid username</span>
	</div>
	<div>
<input id='send' name='send' type='button' value='Send' />
	</div>
</form>

JavaScript

$(document).ready(function(){

var form = $('#customForm');
var name = $('#name');
var nameInfo = $('#nameInfo');
var state = false;

name.keyup(validateName);

function validateName(){
	if ( name.val().length <= 4 ){
		name.removeClass('valid');  // stergi clasa daca exista
		nameInfo.removeClass('valid');
		name.addClass('error');  // adaugi clasa error
		nameInfo.addClass('error');
		nameInfo.text (" You need to have more than 4 letters ");
		state = false;
	}else{
		var uname = name.val();
		$.post('validateuser.php' , {names:uname} , function(data){
			if (data != 1){
				name.removeClass('valid');
				nameInfo.removeClass('valid');
				name.addClass('error');
				nameInfo.addClass('error');
				nameInfo.text("This name is already registered!");
				state = false;
			}else{
				name.removeClass('error');
				nameInfo.removeClass('error');
				name.addClass('valid');
				nameInfo.addClass('valid');
				nameInfo.text('Valid name');
				state = true;
				}
			});
		

		}
	
	return state;
}
    
    $("#send").click(function(){
    if( validateName() == true ){
        alert('works');
});
});