How to Validate HTML Form Using PHP/jQuery?

Submitted by prabaweb on Saturday, April 18, 2015 - 00:14.

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>

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.

Tags

Add new comment

About text formats
  • 500 views