Form validation using jQuery in PHP

jQuery validation in PHP registration form; In this tutorial, i am going to show you how to add jQuery validation rules in PHP forms & store validate data into mysql database.

There are two types of validation available in PHP; which are server side and client side validation.Through this tutorial, you will learn how to implement client-side validation using jQuery validation plugin and use it validation on PHP forms.

jQuery Validation in PHP Registration Form

  • Step 1 – Create PHP Project
  • Step 2 – Create Database Table And Connect App to DB
  • Step 3 – Create Simple Registration Form In HTML
  • Step 4 – Create jQuery Validation Rules and Add In HTML
  • Step 5 – Store Registration Form Data to Database

Step 1 – Create PHP Project

In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.

Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

Step 2 – Create Database Table And Connect App to DB

In step 2, you need to create database and table. So run the following sql query to create database and table:

CREATE DATABASE my_db;

CREATE TABLE users(
id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
contact varchar(255) NOT NULL,
password varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Then create a php file that named mydbCon. Which is used to connect phpmyadmin mysql database to project (demo).

So, now create mydbCon file and add the below given code into your file:

<?php

    $hName='localhost'; // host name

    $uName='root';   // database user name

    $password='';   // database password

    $dbName = "my_db"; // database name

    $dbCon = mysqli_connect($hName,$uName,$password,"$dbName");

      if(!$dbCon){
          die('Could not Connect MySql Server:' .mysql_error());
      }
?>

Step 3 – Create Simple Registration Form In HTML

In step 3, create a php file that named registration.php. This file will display PHP registration form and store form data into MySQL database with JQuery validation. Now, you need to add the following registration form code into registration.php file:

<!DOCTYPE html>
<html>

<head>
  <title>jquery validation in php registration form - Laratutorials.com</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
</head>

<body class="container">
  <div class="row mt-3">
    <div class="col-md-6">
      <h4 class="mb-3">jQUERY Form Validation in PHP - <a href="https://www.Laratutorials.com" target="_blank" rel="noopener noreferrer">Lara tutorials</a>
      </h4>
      <form id="form" method="post" action="store.php">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" name="name" id="name">
        </div>
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="text" class="form-control" name="email" id="email">
        </div>
        <div class="form-group">
          <label for="contact">Contact</label>
          <input type="text" class="form-control" name="contact" id="contact">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" name="password" id="password">
        </div>
        <div class="form-group">
          <label for="confirmPassword">Confirm Password</label>
          <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
        </div>
        <input type="submit" class="btn btn-primary" value="Submit" />
      </form>
    </div>
  </div>
</body>
<style>
  .error {
    color: red;
  }
</style>


</html>

With the above form, i will use jQuery validation with PHP registration form.

Step 4 – Create Validation Rules and Import In HTML

In step 4, create jQuery validation rules and add this rules into registration.php file:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
  $(document).ready(function () {
    $('#form').validate({
      rules: {
        name: {
          required: true
        },
        email: {
          required: true,
          email: true
        },
        contact: {
          required: true,
          rangelength: [10, 12],
          number: true
        },
        password: {
          required: true,
          minlength: 8
        },
        confirmPassword: {
          required: true,
          equalTo: "#password"
        }
      },
      messages: {
        name: 'Please enter Name.',
        email: {
          required: 'Please enter Email Address.',
          email: 'Please enter a valid Email Address.',
        },
        contact: {
          required: 'Please enter Contact.',
          rangelength: 'Contact should be 10 digit number.'
        },
        password: {
          required: 'Please enter Password.',
          minlength: 'Password must be at least 8 characters long.',
        },
        confirmPassword: {
          required: 'Please enter Confirm Password.',
          equalTo: 'Confirm Password do not match with Password.',
        }
      },
      submitHandler: function (form) {
        form.submit();
      }
    });
  });
</script>

Step 5 – Store Registration Form Data to Database

In step 5, create new file that named store.php file. Because this is used to store validate registration form data into MySQL database.

So, add the below code into your store.php file:

<?php
 
  // database connection
   include 'mydbCon.php';
 
  // post data
  if(!empty($_POST)) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $contact = $_POST['contact'];
    $password = sha1($_POST['password']);
 
    // insert data into database
    $sql = "INSERT INTO users (name, email, contact, password) VALUES ('$name', '$email', '$contact','$password')";
    $insertData = mysqli_query($dbCon,$sql);
 
    if($insertData){
      echo "The form has been successfully submitted.";
    } else {
      echo "Something went wrong!";
    }
  }
 
?>

Conclusion

jQuery validation in PHP registration form; In this tutorial,You have learned how to implement and use jQuery validation rules in PHP forms & store validate data into mysql database.

Recommended PHP Tutorials

Be First to Comment

Leave a Reply

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