Form Validation using jQuery in PHP
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 implement client-side jquery validation in PHP + MySQL registration or signup and contact us form; 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.
Recommended PHP Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
