Form Validation using jQuery in PHP

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.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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