HTML Form Validation Using JavaScript Tutorial

Published on: November 20, 2014   Last Updated on : June 1, 2018   Posted By : WebDesignReference

HTML Form Validation Using JavaScript Tutorial

HTML Form Validation Tutorial and Reference: Here is a simple HTML Form Validation script using JavaScript.

Example : Html form validation reference

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>form validation reference</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
  function validateform(form)
  {           
          
     if(form.name.value == "") {
       alert("Error: Please Enter Name");
        form.name.focus();
        return false;
      }
           
     if(form.email.value == "") {
      alert("Error: Please Enter Email");
      form.email.focus();
      return false;
      }
     
        var x = form.email.value;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Not a valid e-mail address");
        form.email.focus();
        return false;
        }
		
		var phone_no = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
		if(form.contact_number.value != "" && form.contact_number.value.match(phone_no))  
		 {  
		   return true;    
		 }  
	   else  
		 {  
		   alert("Not a valid Phone Number");  
		   return false;  
		 }          
      
     if(form.state.value == "none") {
      alert("Error: please select a state");
      form.state.focus();
      return false;
      }
      
       if(form.password.value != "" && form.password.value == form.confirm_password.value) {
		  if(form.password.value.length < 6) {
			alert("Error: Password must contain at least six characters!");
			form.password.focus();
			return false;
		  }
		  if(form.password.value == form.email.value) {
			alert("Error: Password must be different from Username!");
			form.password.focus();
			return false;
		  }
      re = /[0-9]/;
		  if(!re.test(form.password.value)) {
			alert("Error: password must contain at least one number (0-9)!");
			form.password.focus();
			return false;
		  }
      re = /[a-z]/;
		  if(!re.test(form.password.value)) {
			alert("Error: password must contain at least one lowercase letter (a-z)!");
			form.password.focus();
			return false;
		  }
		  re = /[A-Z]/;
		  if(!re.test(form.password.value)) {
			alert("Error: password must contain at least one uppercase letter (A-Z)!");
			form.password.focus();
			return false;
		  }
	} 
		
		 else {
		  alert("Error: Please check that you've entered and confirmed your password!");
		  form.password.focus();
		  return false;
		}
     
        
     
     
  }

</script>
</head>
<body>


<form action="" method="post" onsubmit="return validateform(this);">
<table>
<tr>
	<td>Name : </td>
	<td><input type="text" name="name" placeholder="Name" /></td>
</tr>

<tr>
	<td>Email : </td>
	<td><input type="text" name="email" placeholder="Email" /></td>
</tr>

<tr>
	<td>Mobile : </td>
	<td><input type="text" name="contact_number" placeholder="Contact_Number" /></td>
</tr>

<tr>
	<td>State : </td>
		<td><select  name="state">
				<option value="none">Please Select a State</option>
				<option>Bihar</option>
				<option>Delhi</option>
				<option>Goa</option>
				<option>Gujarat</option>
				<option>Haryana</option>
				<option>Jammu and Kashmir</option>
				<option>Jharkhand</option>
				<option>Madhya Pradesh</option>
				<option>Maharashtra</option>
				<option>Punjab</option>
				<option>Rajasthan</option>
				<option>Sikkim</option>
				<option>Uttar Pradesh</option>
				<option>Uttarakhand</option>
				<option>West Bengal</option>
				<option>Chandigarh</option>            
			</select>
		</td>
</tr>

<tr>
	<td>Password : </td>
	<td><input type="password" name="password" placeholder="Password" /></td>
</tr>

<tr>
	<td>Confirm Password : </td>
	<td><input type="password" name="confirm_password" placeholder="Confirm Password" /></td>
</tr>

<tr>
	<td><input type="submit" name="submit_btn" value="Submit" /></td>
	<td></td>
</tr>

<tr>
	<td></td>
	<td></td>
</tr>



</table>
  </form>    
</div><!-- End .form-container-->
</div><!-- End .wrapper-->

</body>
</html>

Also Related to HTML5

 

Leave a Reply