JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<form name="myForm" method="" action="" onsubmit="return validate();">
  <ul>
    <li>
      Name: 
      <input type="text" name="Name" />
    </li>
    <li>
      Email: 
      <input type="text" name="EMail" />
    </li>
    <li>
      Zip: 
      <input type="text" name="Zip" />
    </li>
    <li>
      Country: 
      <select name="Country">
        <option value="-1" selected>Select</option>
        <option>India</option>
        <option>USA</option>
        <option>China</option>
      </select>
    </li>
    <li><input type="Submit" value="Submit"></li>
  </ul>
</form>

JavaScript

function validate(){ 
	var theForm = document.myForm;
	
	if( theForm.Name.value == "" ){
		alert( "Please provide your name!" );
		theForm.Name.focus() ;
		return false;
	}
	
	if( theForm.EMail.value == "" )	{
		alert( "Please provide your Email!" );
		theForm.EMail.focus() ;
		return false;
	}else{
		//validating email criteria 
		var reCheck = validateEmail();
		if( reCheck == false ){
			return false;
		} 
 	}

	if(theForm.Zip.value == "" || isNaN(theForm.Zip.value) || theForm.Zip.value.length != 5){
		alert("Please enter valid Zip code");
		theForm.Zip.value == "";
		theForm.Zip.focus();		
		return false;
	} 
	if(theForm.Country.value == "-1"){
		alert("Please select your Country");
		theForm.Country.focus();
		return false;
	}
	else{
		alert("Form submitted successfully");
		return true;		
	}	
}

////
function validateEmail(){
	var theForm = document.myForm;
	var emailID = theForm.EMail.value;
	atSymbol = emailID.indexOf("@");
	dotSymbol = emailID.lastIndexOf(".");
	if (atSymbol < 1 || ( dotSymbol - atSymbol < 2 )) {
		alert("Please enter correct email ID")
		theForm.EMail.focus() ;
		return false;
	}
	return true;
}