JSFiddle - React, Tailwind, and code Playground

HTML

<form action="addcustomer.php" method="post" onsubmit="return validate(this);">
		<table border="0" cellspacing="1" cellpadding="3">
			<tr><td colspan="2" align="center">Enter your information</td></tr>
  			<tr><td>Email Address: </td><td> <input size="20" type="text" name="emailaddress" > <span id="emailmsg"></span></td></tr>
  			<tr><td>Password: </td><td>  <input size="20" type="password" name="password" ><span id="passwdmsg"></span></td></tr>
  			<tr><td>ReType Password:  </td><td> <input size="20" type="password" name="repassword"><span id="repasswdmsg"></span></td></tr>
  			<tr><td>Complete Name  </td><td> <input size="50" type="text" name="complete_name" ><span id="usrmsg"></span></td></tr>
   			<tr><td>Address:  </td><td> <input size="80" type="text" name="address1"></td></tr>
  			<tr><td></td><td> <input size="80" type="text" name="address2"></td></tr>
  			<tr><td>City:  </td><td> <input size="30" type="text" name="city"></td></tr>
  			<tr><td>State:  </td><td> <input size="30" type="text" name="state"></td></tr>
 			<tr><td>Country:  </td><td> <input size="30" type="text" name="country"></td></tr>
  			<tr><td>Zip Code:  </td><td> <input size="20" type="text" name="zipcode"></td></tr>
    			<tr><td>Phone No:  </td><td> <input size="30" type="text" name="phone_no"></td></tr>
  			<tr><td><input type="submit" name="submit" value="Submit"> </td><td> 
    			<input type="reset" value="Cancel"></td></tr>
		</table>
  	</form>

JavaScript

function validate(userForm) {
	div=document.getElementById("emailmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	regex=/(^\w+\@\w+\.\w+)/;
	match=regex.exec(userForm.emailaddress.value);
	if(!match)
	{
		div.appendChild(document.createTextNode("Invalid Email"));
		userForm.emailaddress.focus();
		return false;
	}
	div=document.getElementById("passwdmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.password.value.length <=5)
	{
		div.appendChild(document.createTextNode("The password should be of at least size 6"));
		userForm.password.focus();
		return false;
	}
	div=document.getElementById("repasswdmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.password.value != userForm.repassword.value)
	{
		div.appendChild(document.createTextNode("The two passwords don't match"));
		userForm.password.focus();
		return false;
	}
 	var div=document.getElementById("usrmsg");
	div.style.color="red";
	if(div.hasChildNodes())
	{
		div.removeChild(div.firstChild);
	}
	if(userForm.complete_name.value.length ==0)
	{
		div.appendChild(document.createTextNode("Name cannot be blank"));
		userForm.complete_name.focus();
		return false;
	}
	return true;
}