Validate Registration Form in PHP

I this article I explain how to validate a registration form using a JavaScript function

Introduction

I this article I explain how to validate a registration form using a JavaScript function. The registration form fields are validated using a JavaScript function. In this form I am using textboxes, a dropdown list, a text area and a checkbox for validation from a JavaScript function and using some extra scripting like CSS and HTML for designing the form.

Example

This is a CSS file; save it as "form.css":

h2

 margin-left: 50px

 color: Automatic

 margin-top: 0px;

 text-Align: Center;

 }

form li

 list-style: none

 margin-bottom: 5px

form ul li label 

 float: left

 clear: left

 width: 265px

 text-align: right

 margin-right: 10px

 font-family:Arial

 font-size:10px

form ul li input, select, span  

 float: left

 margin-bottom: 10px

 border: 1px solid maroon

form textarea  

 float: left

 width: 250px

 height: 80px

 } 

[type="submit"]  

 clear: left

 margin: 20px 0 0 300px

 font-size:10px 

}


This is a JavaScript file to be saved as "jsvalidation.js." This file validates using a JavaScript function using field_Id for creating the function. The JavaScript function calls the onblur event.

You can try it for validation, use this code.

 function firstfocus() 

  { 

  var uid = document.registration.username.focus(); 

  return true

  }  

  function username_validation(mw,my) 

  { 

  var uid = document.registration.username; 

  var uid_len = uid.value.length; 

  if (uid_len == 0 || uid_len >= my || uid_len < mw) 

  { 

  alert("Please enter username/minimum character "+mw+" to "+my); 

  uid.focus(); 

  return false

  }  

  document.registration.passwrd.focus(); 

  return true

  } 

  function passwrd_validation(mv,my) 

  { 

  var passwrd = document.registration.passwrd; 

  var passwrd_len = passwrd.value.length; 

  if (passwrd_len == 0 ||passwrd_len >= my || passwrd_len < mv) 

  { 

  alert("Please enter Password/minimum password "+mv+" to "+my); 

  passwrd.focus(); 

  return false

  } 

  document.registration.username.focus(); 

  return true

  } 

  function allLetter() 

  {  

  var uname = document.registration.username; 

  var letters = /^[A-Za-z]+$/

  if(uname.value.match(letters)) 

  {  

  document.registration.address.focus(); 

  return true

  } 

  else 

  { 

  alert('Username only character'); 

  uname.focus(); 

  return false

  } 

  }   

  function alphanumeric() 

  {  

  var uadd = document.registration.address; 

  var letters = /^[0-9a-zA-Z]+$/

  if(uadd.value.match(letters)) 

  {  

  document.registration.country.focus(); 

  return true

  } 

  else 

  { 

  alert('Address only alphanumeric'); 

  uadd.focus(); 

  return false

  } 

  }  

  function countryselect() 

  { 

  var ucountry = document.registration.country; 

  if(ucountry.value == "Default"

  { 

  alert('Please select your country'); 

  ucountry.focus(); 

  return false

  } 

  else 

  {   

  document.registration.zip.focus(); 

  return true

  } 

  }   

  function allnumeric() 

  {  

  var uzip = document.registration.zip; 

  var numbers = /^[0-9]+$/

  if(uzip.value.match(numbers)) 

  {   

  document.registration.email.focus();  

  return true

  } 

  else 

  { 

  alert('ZIP Code only numeric'); 

  uzip.focus(); 

  return false

  } 

  }   

  function ValidateEmail() 

  { 

  var uemail = document.registration.email; 

  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

  if(uemail.value.match(mailformat)) 

  { 

  document.registration.desc.focus(); 

  return true

  } 

  else 

  { 

  alert("Invalid email address!"); 

  uemail.focus(); 

  return false

  } 

  }

   
This is a HTML file; save it as "Registration.php." In this form I used the events Onload, Onblur, Onclick.

<meta charset="utf-8"> 

<title>Registration Form</title> 

<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" /> 

<meta name="description" content="This document is an example of JavaScript Field label form validation using a sample registration form. " /> 

<link rel='stylesheet' href='form.css' type='text/css' /> 

<script src="jsvalidation.js"></script> 

</head> 

<body bgcolor="#E7DEDC"onload="firstfocus();"> 

<h2>Registration Form</h2> 

<form name='registration'">

<ul> 

<li><label for="username">Username:</label></li> 

<li><input type="text" name="username" size="12" onblur="username_validation(6,12)"/></li> 

<li><label for="passwrd">Password:</label></li> 

<li><input type="password" name="passwrd" size="12" onblur="passwrd_validation(6,12)"/></li> 

<li><label for="user">Name:</label></li> 

<li><input type="text" name="user" size="37" onblur="allLetter()"/></li> 

<li><label for="address">Address:</label></li> 

<li><input type="text" name="address" size="37" onblur="alphanumeric()"/></li> 

<li><label for="country">Country:</label></li> 

<li><select name="country" onblur="countryselect()"> 

<option selected="" value="Default">(Please select a country)</option> 

<option value="AF">Australia</option> 

<option value="AL">Canada</option> 

<option value="DZ">India</option> 

<option value="AS">Russia</option> 

<option value="AD">USA</option> 

</select></li> 

<li><label for="zip">ZIP Code:</label></li> 

<li><input type="text" name="zip" size="12" onblur="allnumeric()"/></li> 

<li><label for="email">Email:</label></li> 

<li><input type="text" name="email" size="37" onblur="ValidateEmail()" /></li> 

<li><label id="gender">Sex:</label></li> 

<li><input type="radio" name="sex" value="Male" checked /><span>Male</span></li> 

<li><input type="radio" name="sex" value="Female" /><span>Female</span></li> 

<li><label>Language:</label></li> 

<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li> 

<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li> 

<li><label for="desc">About:</label></li> 

<li><textarea name="desc" id="desc" cols"5"></textarea></li> 

<li><input type="submit" name="submit" value="Submit" onclick="alert('Form submitted successfully')" /></li> 

</ul> 

</form> 

</body>

Output
Validate registration form.jpg