Skip to main content

How to Validate HTML Form Using PHP/jQuery?

Language


Hi there,

Today I am going to show how to validate form using jquery and php.

HTML Forms are one of the main points of interaction between a user and a web site or application

  1. <?php
  2.  
  3. $name = '';
  4. $gender = '';
  5. $address = '';
  6. $email = '';
  7. $username = '';
  8. $password = '';
  9. $output = '';
  10.  
  11. if($_POST) {
  12. // collect all input and trim to remove leading and trailing whitespaces
  13. $name = trim($_POST['name']);
  14. $gender = trim($_POST['gender']);
  15. $address = trim($_POST['address']);
  16. $email = trim($_POST['email']);
  17. $username = trim($_POST['username']);
  18. $password = trim($_POST['password']);
  19.  
  20. $errors = array();
  21.  
  22. // Validate the input
  23. if (strlen($name) == 0)
  24. array_push($errors, "Please enter your name");
  25.  
  26. if (!(strcmp($gender, "Male") || strcmp($gender, "Female") || strcmp($gender, "Other")))
  27. array_push($errors, "Please specify your gender");
  28.  
  29. if (strlen($address) == 0)
  30. array_push($errors, "Please specify your address");
  31.  
  32. if (!filter_var($email, FILTER_VALIDATE_EMAIL))
  33. array_push($errors, "Please specify a valid email address");
  34.  
  35. if (strlen($username) == 0)
  36. array_push($errors, "Please enter a valid username");
  37.  
  38. if (strlen($password) < 5)
  39. array_push($errors, "Please enter a password. Passwords must contain at least 5 characters.");
  40.  
  41. // If no errors were found, proceed with storing the user input
  42. if (count($errors) == 0) {
  43. array_push($errors, "No errors were found. Thanks!");
  44. }
  45.  
  46. //Prepare errors for output
  47. $output = '';
  48. foreach($errors as $val) {
  49. $output .= "<p class='output'>$val</p>";
  50. }
  51.  
  52. }
  53.  
  54. ?>
  55.  
  56. <html>
  57. <head>
  58. <!-- Define some CSS -->
  59. <style type="text/css">
  60. .label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
  61. #register-form label.error, .output {color:#FB3A3A;font-weight:bold;}
  62. </style>
  63.  
  64. <!-- Load jQuery and the validate plugin -->
  65. <script src="js/jquery-1.9.1.js"></script>
  66. <script src="js/jquery.validate.min.js"></script>
  67.  
  68. <!-- jQuery Form Validation code -->
  69. <script>
  70.  
  71. // When the browser is ready...
  72. $(function() {
  73.  
  74. // Setup form validation on the #register-form element
  75. $("#register-form").validate({
  76.  
  77. // Specify the validation rules
  78. rules: {
  79. name: "required",
  80. gender: "required",
  81. address: "required",
  82. email: {
  83. required: true,
  84. email: true
  85. },
  86. username: "required",
  87. password: {
  88. required: true,
  89. minlength: 5
  90. }
  91. },
  92.  
  93. // Specify the validation error messages
  94. messages: {
  95. name: "Please enter your name",
  96. gender: "Please specify your gender",
  97. address: "Please enter your address",
  98. email: "Please enter a valid email address",
  99. username: "Please enter a valid username",
  100. password: {
  101. required: "Please provide a password",
  102. minlength: "Your password must be at least 5 characters long"
  103. }
  104. },
  105.  
  106. submitHandler: function(form) {
  107. form.submit();
  108. }
  109. });
  110.  
  111. });
  112.  
  113. </script>
  114. </head>
  115. <body>
  116. <?php echo $output; ?>
  117. <!-- The form that will be parsed by jQuery before submit -->
  118. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="register-form" novalidate>
  119.  
  120. <div class="label">Name</div><input type="text" id="name" name="name" value="<?php echo $name; ?>" /><br />
  121. <div class="label">Gender</div><select id="gender" name="gender" />
  122. <option value="Female">Female</option>
  123. <option value="Male">Male</option>
  124. <option value="Other">Other</option>
  125. </select><br />
  126. <div class="label">Address</div><input type="text" id="address" name="address" value="<?php echo $address; ?>" /><br />
  127. <div class="label">Email</div><input type="text" id="email" name="email" value="<?php echo $email; ?>" /><br />
  128. <div class="label">Username</div><input type="text" id="username" name="username" value="<?php echo $username; ?>" /><br />
  129. <div class="label">Password</div><input type="password" id="password" name="password" /><br />
  130. <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
  131.  
  132. </form>
  133.  
  134. </body>
  135. </html>

Tags

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.