JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" method="post" action="#">
		<div class="form-section" >
			<div class="row">
				<label>Name</label>
				<input id="name" type="text" class="required" value="" />
			</div>
			<div class="row">
				<label>Name</label>
				<input id="phone" type="text" class="required" value="" />
			</div>
			<div class="row">
				<label>Name</label>
				<input type="text" class="required" />
			</div>
			<div class="row">
				<label>Name</label>
				<input type="submit" value="SEND"/>
			</div>
		</div>
	</form>
	<form id="form1" method="post" action="#">
		<div class="form-section" >
			<div class="row">
				<label>Name</label>
				<input id="name1" type="text" class="required" value="" />
			</div>
			<div class="row">
				<label>Name</label>
				<input id="phone1" type="text" class="required" value="" />
			</div>
			<div class="row">
				<label>Name</label>
				<input type="text" class="required" />
			</div>
			<div class="row">
				<label>Name</label>
				<input type="submit" value="SEND"/>
			</div>
		</div>
	</form>

CSS

.form-section .row input.invalid {
	border:1px solid red;
}

JavaScript

var $ = {
	getById : function(e){
		return document.getElementById(e);
	},
	isEmpty : function(e,m){
		var e = $.getById(e);
		var isValid = /[^.]/.test(e.value);
		$.showMessage(isValid,e,m);
		return isValid;
	},
	isAlpha : function(e,m){
		var e = $.getById(e);
		var isValid = /[a-zA-Z]/.test(e.value);
		$.showMessage(isValid,e,m);
		return isValid;
	},
	isNumeric : function(e,m){
		var e = $.getById(e);
		var isValid = /[0-9]/.test(e.value);
		$.showMessage(isValid,e,m);
		return isValid;
	},
	showMessage : function(valid,e,m){
		if(!valid){
			e.className = 'invalid';
			console.log(m);
			setTimeout(function(){e.focus();}, 100);
			
		}else{
			e.className = '';
		}
	},
	_onBlur : function(form,event,func){
		var form = $.getById(form);
		var elements = form.getElementsByTagName('*');
		for(var i=0; i< elements.length; i++){
			elements[i][event] = func;
		}
	}
}


	var abc = function(){
		return(
			$.isEmpty('name','empty message') && 
			$.isAlpha('name','alpha message') &&
			$.isEmpty('phone','empty message') && 
			$.isNumeric('phone','alpha message')
		);
	}
	var abc1 = function(){
		return(
			$.isEmpty('name1','empty message1') && 
			$.isAlpha('name1','alpha message1') &&
			$.isEmpty('phone1','empty message1') && 
			$.isNumeric('phone1','alpha message1')
		);
	}
	$.getById("form").onsubmit = abc;
	$._onBlur("form","onblur",abc);
	
	$.getById("form1").onsubmit = abc1;
	$._onBlur("form1","onblur",abc1);
	//$._onBlur("form","onkeyup",abc);