JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<form name="inputForm" onsubmit="return ValidateForm();" method="post" action="mailto:[email protected]" >

<label for="fname">Input First Name</label>
<input type="text" name="fname" id="fname" required><br/>
<label for="lname">Input Last Name</label>
<input type="text" name="lname" id="lname"/><br/>
<label for="stadd">Address</label>
<input type="text" name="stadd" id="stadd" /><br/>
<label for="city">City</label>
<input type="text" name="city" id="city" /><br/>
<label for="State">State</label>
<select name="State" id="State">
			<option value="">AL</option>
			<option value="">AK</option>
			<option value="">AZ</option>
			<option value="">AR</option>
			<option value="">CA</option>
			<option value="">CO</option>
			<option value="">CT</option>
			<option value="">DE</option>
			<option value="" selected="selected">FL</option>
			<option value="">GA</option>
			<option value="">HI</option>
			<option value="">ID</option>
			<option value="">IL</option>
			<option value="">IN</option>
			<option value="">IA</option>
			<option value="">KS</option>
			<option value="">KY</option>
			<option value="">LA</option>
			<option value="">ME</option>
			<option value="">MD</option>
			<option value="">MA</option>
			<option value="">MI</option>
			<option value="">MN</option>
			<option value="">MS</option>
			<option value="">MO</option>
			<option value="">MT</option>
			<option value="">NE</option>
			<option value="">NV</option>
			<option value="">NH</option>
			<option value="">NJ</option>
			<option value="">NM</option>
			<option value="">NY</option>
			<option value="">NC</option>
			<option value="">ND</option>
			<option value="">OH</option>
			<option value="">OK</option>
			<option value="">OR</option>
			<option value="">PA</option>
			<option value="">RI</option>
			<option value="">SC</option>
			<option value="">SD</option>
			<option value="">TN</option>
			<option value="">TX</option>
			<option value="">UT</option>
			<option...

JavaScript

function ValidateForm()
{
  alert("Now Validating Form");
  //if (!ValidateNotBlank(document.forms["inputForm"]["fname"].value, "First Name" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["lname"].value, "Last Name" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["stadd"].value, "Address" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["city"].value, "City" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["zip"].value, "Zip" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["email"].value, "E-Mail" ))  return false;
  if (!ValidateNotBlank(document.forms["inputForm"]["date"].value, "Birth Date" ))  return false;
  //neeeded this
  if (!ValidateQuestion(document.forms["inputForm"]["question"].value, "Security Question" ))  return false;
  return true;
}
  function ValidateNotBlank(val, message)
{
	if (val == null || val == "")
	{
	 alert("must enter a value for" + message);
	 return false;
	}
	 return true;

}
function ValidateFirstName() 
{ 
	var letters = /^[a-zA-Z\s]*$/; 

	if(letters.test(document.forms["inputForm"]["fname"].value) == false) 
	{ 
	alert("First Name must be all letters."); 
	return false; 
	} 
	return true;
} 

function ValidateLastName() 
{ 
	var letters = /^[a-zA-Z\s]*$/; 

	if(letters.test(document.forms["inputForm"]["lname"].value) == false) 
	{ 
	alert("Last Name must be all letters."); 
	return false; 
	} 
	return true;
} 
function ValidateCity() 
{ 
	var letters = /^[a-zA-Z\s]*$/; 

	if(letters.test(document.forms["inputForm"]["city"].value) == false) 
	{ 
	alert("City must be all letters."); 
	return false; 
	} 
	return true;
} 
function ValidateZip()
{
	var ex = /^[0-9]{5}$/;
	
	if (ex.test(document.forms["inputForm"]["zip"].value) == false)
	{
    alert("Must enter 5 digit Zip/Postal Code");
	return false;
	}
	return true;
}

function ValidatePhone()
{
	var ex = /^\d{3}-\d{3}-\d{4}$/;
	
	if...