Validate HTML Form Using PHP/jQuery PHP Script


Validate HTML Form Using PHP/jQuery PHP Script

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

 

 

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"