jQuery Form Validation in PHP

July 5, 2022July 5, 2022 Rabiya 0 Comments

jQuery form validation (Client-side validation) in PHP; In this tutorial; you will learn how to use jQuery validation or client side validation with PHP Forms using jQuery validation library.

This tutorial will create simple contact us form and add client-side validation on it in PHP MySQL using jQuery client-side validation library.

Simple jQuery (Client Side ) Form Validation in PHP + MySQL

Use the following steps to to implement client-side jquery validation in PHP + MySQL; as follows:

Step 1 – Create PHP Project
Step 2 – Create Table in Database
Step 3 – Create a Database Connection File
Step 4 – Create HTML Form
Step 5 – Add Client Side Validation on Form

Step 1 – Create PHP Project

First of all; visit your web server directory and create a php directory; which name demo.

Step 2 – Create Table in Database

Create table into your database; so visit your PHPMyAdmin and create a table name contacts_list with the following fields: name, email, mobile.

CREATE TABLE `contacts_list` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(50) NOT NULL,
  `subject` varchar(255) NOT NULL,
  `Message` text NOT NULL,
  `sent_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Step 3 – Create a Database Connection File

Create a file name db.php and update the below code into your file.

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

The above code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this file:

Step 4 – Create HTML Form

Create a simple HTML contact us form and add the following code into your contact-form.php file:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Form in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.container {
max-width: 500px;
margin: 50px auto;
text-align: left;
font-family: sans-serif;
}
form {
border: 1px solid #1A33FF;
background: #ecf5fc;
padding: 40px 50px 45px;
}
.form-control:focus {
border-color: #000;
box-shadow: none;
}
label {
font-weight: 600;
}
.error {
color: red;
font-weight: 400;
display: block;
padding: 6px 0;
font-size: 14px;
}
.form-control.error {
border-color: red;
padding: .375rem .75rem;
}    
</style>
</head>
<body>
<div class="container mt-5">
<?php
include('db.php');
if(!empty($_POST["send"])) {
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$subject = $_POST["subject"];
$message = $_POST["message"];
// Store contactor data in database
$sql = $connection->query("INSERT INTO contacts_list(name, email, phone, subject, message, sent_date)
VALUES ('{$name}', '{$email}', '{$phone}', '{$subject}', '{$message}', now())");
}  
?>
<!-- Messge -->
<?php if(!empty($response)) {?>
<div class="alert text-center <?php echo $response['status']; ?>" role="alert">
<?php echo $response['message']; ?>
</div>
<?php }?>
<!-- Contact form -->
<form action="" name="contactForm" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" id="phone">
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control" name="subject" id="subject">
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" name="message" id="message" rows="4"></textarea>
</div>
<input type="submit" name="send" value="Send" class="btn btn-dark btn-block">
</form>
</div>
</body>
</html>

Step 5 – Add Client Side Validation on Form

Add client-side validation on PHP Html forms; so add the jQuery client-side validation library and implement jQuery validation code with PHP forms; as shown below:

<!-- JavaScript -->
<
script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" > < /script> <
script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js" > < /script>
<
script >
$(function () {
$("form[name='contactForm']").validate({
// Define validation rules
rules: {
name: "required",
email: "required",
phone: "required",
subject: "required",
message: "required",
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10,
maxlength: 10,
number: true
},
subject: {
required: true
},
message: {
required: true
}
},
// Specify validation error messages
messages: {
name: "Please provide a valid name.",
email: {
required: "Please enter your email",
minlength: "Please enter a valid email address"
},
phone: {
required: "Please provide a phone number",
minlength: "Phone number must be min 10 characters long",
maxlength: "Phone number must not be more than 10 characters long"
},
subject: "Please enter subject",
message: "Please enter your message"
},
submitHandler: function (form) {
form.submit();
}
});
}); <
/script>

Conclusion

Client-side validation in PHP MySQL using jQuery validation; In this tutorial; you have learned how to add client-side validation with PHP Forms using the jQuery validation library.