Inline Input Validation using PHP with Javascript

Submitted by argie on Saturday, December 15, 2012 - 14:17.
This tutorial will help you validate a control like text field using javascript and display the error inline with the text field. I write this tutorial to help other programmer having difficulties in creating inline input validation. It also validate the email address. To start this tutorial lets follow the steps bellow.

Step 1: Open Your php editor and copy/paste the code below

This code is the javascript portion of the entire system. This is used to validate the form. Copy the code below and paste it within the tag and save it as "index.php". 
  1. <script>
  2. 	function validateName(x){
  3. 		// Validation rule
  4. 		var re = /[A-Za-z -']$/;
  5. 		// Check input
  6. 		if(re.test(document.getElementById(x).value)){
  7. 			// Style green
  8. 			document.getElementById(x).style.background ='#ccffcc';
  9. 			// Hide error prompt
  10. 			document.getElementById(x + 'Error').style.display = "none";
  11. 			return true;
  12. 		}else{
  13. 			// Style red
  14. 			document.getElementById(x).style.background ='#e35152';
  15. 			// Show error prompt
  16. 			document.getElementById(x + 'Error').style.display = "block";
  17. 			return false;  
  18. 		}
  19. 	}
  20. 	// Validate username
  21. 	function validateuser(user){
  22. 		var userid=document.getElementById('user');
  23. 		  var uu=userid.value;
  24. 		  var chrlen=uu.length;
  25. 		  if(chrlen==0)  {
  26. 			document.getElementById('user').style.background ='#e35152';
  27. 		   return false;
  28. 			}
  29. 			else{
  30. 			document.getElementById('user').style.background ='#ccffcc';
  31. 			document.getElementById('userError').style.display = "none";
  32. 			return true;
  33. 			}
  34. 	}
  35. 	// Validate password
  36. 	function validatepassword(password){
  37. 		var pass=document.getElementById('password');
  38. 		  var wordsss=pass.value;
  39. 		  var chr=wordsss.length;
  40. 		  if(chr==0)  {
  41. 			document.getElementById('password').style.background ='#e35152';
  42. 		   return false;
  43. 			}
  44. 			else{
  45. 			document.getElementById('password').style.background ='#ccffcc';
  46. 			document.getElementById('passwordError').style.display = "none";
  47. 			return true;
  48. 			}
  49. 	}
  50. 	// Validate re-enter password
  51. 	function validaterepassword(repassword){
  52. 		var pawd1=document.getElementById('password');
  53. 		  var pawdcon2=document.getElementById('repassword');
  54.  
  55. 		 if(pawdcon2.value.length==0)  {
  56. 			document.getElementById('repassword').style.background ='#e35152';
  57. 		   return false;
  58. 			}
  59.  
  60. 		 else if(pawd1.value!=pawdcon2.value)
  61. 		  {
  62. 			document.getElementById('repassword').style.background ='#e35152';
  63. 		   return false;
  64. 		  }
  65. 		 else{
  66. 			document.getElementById('repassword').style.background ='#ccffcc';
  67. 			document.getElementById('repasswordError').style.display = "none";
  68. 			return true;
  69. 		 }
  70. 	}
  71. 	// Validate email
  72. 	function validateEmail(email){
  73. 		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  74. 		if(re.test(email)){
  75. 			document.getElementById('email').style.background ='#ccffcc';
  76. 			document.getElementById('emailError').style.display = "none";
  77. 			return true;
  78. 		}else{
  79. 			document.getElementById('email').style.background ='#e35152';
  80. 			return false;
  81. 		}
  82. 	}
  83. 	// Validate Select boxes
  84. 	function validateSelect(x){
  85. 		if(document.getElementById(x).selectedIndex !== 0){
  86. 			document.getElementById(x).style.background ='#ccffcc';
  87. 			document.getElementById(x + 'Error').style.display = "none";
  88. 			return true;
  89. 		}else{
  90. 			document.getElementById(x).style.background ='#e35152';
  91. 			return false;  
  92. 		}
  93. 	}
  94. 	function validateCheckbox(x){
  95. 		if(document.getElementById(x).checked){
  96. 			return true;
  97. 		}
  98. 		return false;
  99. 	}      
  100. 	function validateForm(){
  101. 		// Set error catcher
  102. 		var error = 0;
  103. 		// Check name
  104. 		if(!validateName('name')){
  105. 			document.getElementById('nameError').style.display = "block";
  106. 			error++;
  107. 		}
  108.  
  109. 		// Validate email
  110. 		if(!validateEmail(document.getElementById('email').value)){
  111. 			document.getElementById('emailError').style.display = "block";
  112. 			error++;
  113. 		}
  114. 		// Validate animal dropdown box
  115. 		if(!validateSelect('animal')){
  116. 			document.getElementById('animalError').style.display = "block";
  117. 			error++;
  118. 		}
  119. 		// Check user
  120. 		if(!validateuser('user')){
  121. 			document.getElementById('userError').style.display = "block";
  122. 			error++;
  123. 		}
  124. 		// Check password
  125. 		if(!validatepassword('password')){
  126. 			document.getElementById('passwordError').style.display = "block";
  127. 			error++;
  128. 		}
  129. 		// Check re-enter password
  130. 		if(!validaterepassword('repassword')){
  131. 			document.getElementById('repasswordError').style.display = "block";
  132. 			error++;
  133. 		}
  134. 		// Validate Radio
  135. 		if(!validateCheckbox('accept')){
  136. 			document.getElementById('termsError').style.display = "block";
  137. 			error++;
  138. 		}
  139. 		// Don't submit form if there are errors
  140. 		if(error > 0){
  141. 			return false;
  142. 		}
  143. 		if(error < 0){
  144. 			var id=document.getElementById('fld');
  145. 			 id.innerHTML="<center><h1><font color=green>Welcome to HScripts.com</h1><br><h4><font color=red>Submission Successful!</font></h4></center>";
  146. 		}
  147. 	}          
  148. </script>

Step 2: Write our CSS style to beautify our form

To create our style, copy the code below and paste it after the javascript in "index.php" file. 
  1. <style type="text/css">
  2. #header
  3. {
  4. 	width:500px;
  5. 	height:70px;
  6. 	margin:0 auto;
  7. 	padding:0 0 0 0 px;
  8. }
  9. </style>

Step 3: Creating Our form to validate

Copy the code below and paste it within the tag in the "index.php" file. 
  1. <form action="welcome.php" method="POST" onsubmit="return validateForm()">
  2.         <fieldset>
  3.             <label for="name">Name</label>
  4.             <input type="text" name="name" id="name" onblur="validateName(name)" />
  5.             <span id="nameError" style="display: none;">You can only use alphabetic characters, space, hyphens and apostrophes</span>
  6.         </fieldset>
  7.         <fieldset>
  8.             <label for="email">Email</label>
  9.             <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  10.             <span id="emailError" style="display: none;">You must enter a valid email address</span>
  11.         </fieldset>  
  12.         <fieldset>
  13.             <label for="animal">Gender</label>
  14.             <select name="animal" id="animal" onblur="validateSelect(name)">
  15.                 <option value="">Sex</option>
  16.                 <option value="Male">Male</option>
  17.                 <option value="Female">Female</option>
  18.             </select>
  19.             <span class="validateError" id="animalError" style="display: none;">You must select your gender</span>
  20.         </fieldset>
  21. 		<fieldset>
  22.             <label for="name">Username</label>
  23.             <input type="text" name="user" id="user" onblur="validateuser(user)" />
  24.             <span id="userError" style="display: none;">You must enter your username</span>
  25.         </fieldset>
  26. 		<fieldset>
  27.             <label for="name">Password</label>
  28.             <input type="password" name="password" id="password" onblur="validatepassword(password)" />
  29.             <span id="passwordError" style="display: none;">You must enter your password</span>
  30.         </fieldset>
  31. 		<fieldset>
  32.             <label for="name">Re-enter Password</label>
  33.             <input type="password" name="repassword" id="repassword" onblur="validaterepassword(repassword)" />
  34.             <span id="repasswordError" style="display: none;">Password mismatch</span>
  35.         </fieldset>
  36.         <fieldset>
  37.             <label for="terms">Terms and Conditions</label>
  38.             <ul>
  39.                 <li>
  40.                     <input type="checkbox" name="terms" id="accept" value="accept" onblur="validateCheckbox(id)" />
  41.                     <label for="accept">Accept our <a href="#">Terms and Conditions</a></label>
  42.                 </li>
  43.             </ul>
  44.             <span class="validateError" id="termsError" style="display: none;">You need to accept our terms and conditions</span>
  45.         </fieldset>      
  46.         <fieldset>
  47.             <input type="submit" id="submit" name="submit" value="Submit" />
  48.         </fieldset>      
  49.     </form>

Step 4: Creating Our Landing Page

to create copy the code below and save it as "welcome.php". 
  1. <?php
  2. $name=$_POST['name'];
  3. $email=$_POST['email'];
  4. $gender=$_POST['animal'];
  5. $user=$_POST['user'];
  6. $password=$_POST['password'];
  7. echo 'Name: '.$name.'<br>';
  8. echo 'Email: '.$email.'<br>';
  9. echo 'Gender: '.$gender.'<br>';
  10. echo 'Username: '.$user.'<br>';
  11. echo 'Password: '.$password.'<br>';
  12. ?>
That's it you've now succesfully created your inline input validation.

Tags

Add new comment

About text formats
  • 263 views