Skip to main content

Inline Input Validation using PHP with Javascript


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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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. <label for="name">Name</label>
  3. <input type="text" name="name" id="name" onblur="validateName(name)" />
  4. <span id="nameError" style="display: none;">You can only use alphabetic characters, space, hyphens and apostrophes</span>
  5. <label for="email">Email</label>
  6. <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  7. <span id="emailError" style="display: none;">You must enter a valid email address</span>
  8. <label for="animal">Gender</label>
  9. <select name="animal" id="animal" onblur="validateSelect(name)">
  10. <option value="">Sex</option>
  11. <option value="Male">Male</option>
  12. <option value="Female">Female</option>
  13. </select>
  14. <span class="validateError" id="animalError" style="display: none;">You must select your gender</span>
  15. <label for="name">Username</label>
  16. <input type="text" name="user" id="user" onblur="validateuser(user)" />
  17. <span id="userError" style="display: none;">You must enter your username</span>
  18. <label for="name">Password</label>
  19. <input type="password" name="password" id="password" onblur="validatepassword(password)" />
  20. <span id="passwordError" style="display: none;">You must enter your password</span>
  21. <label for="name">Re-enter Password</label>
  22. <input type="password" name="repassword" id="repassword" onblur="validaterepassword(repassword)" />
  23. <span id="repasswordError" style="display: none;">Password mismatch</span>
  24. <label for="terms">Terms and Conditions</label>
  25. <ul>
  26. <li>
  27. <input type="checkbox" name="terms" id="accept" value="accept" onblur="validateCheckbox(id)" />
  28. <label for="accept">Accept our <a href="#">Terms and Conditions</a></label>
  29. </li>
  30. </ul>
  31. <span class="validateError" id="termsError" style="display: none;">You need to accept our terms and conditions</span>
  32. <input type="submit" id="submit" name="submit" value="Submit" />
  33. </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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.