HTML Form Validation Using JavaScript Tutorial

Last Updated on: April 22, 2020   Posted By: Web Design Reference

HTML Form Validation Using JavaScript Tutorial

HTML Form Validation Using JavaScript Tutorial: Here is a simple HTML Form validation script using JavaScript. Learn how to create an HTML Form Validation script with an example. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

Example of HTML Form Validation 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>
 
 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

 

Other Related Posts

Pin0
 

Leave a Reply