Ajax form validation in php
Today I will teach you how to create validation for the ajax request with the help of jQuery. As we all know, Jquery becomes more powerful and useful nowadays. Many developer face issue of server-side validation when they submit a post with the help of ajax request.
So, Today I will give a simple but useful example of the bootstrap form with ajax validation in php.
Here, I will create a contact form in the HTML, I will use Bootstrap for the styling and jquery for ajax request.
Working: When we will submit the form it will fire the ajax request and after validation, it will display the message as shown in the image Below.
We need two files for that, File names are given below.
1. index.php
2. postRequest.php
In index.php, we will create the layout for the form for layout style we are using bootstrap.We will also write some jquery code to fire the ajax request. We will send the request to the postRequest.php, in this file we will check validation and return the msg to index.php in the JSON format
preview:
Let see all code in the example.
1.index.php
<!DOCTYPE html>
<html>
<head>
<title>Ajax Form Validation Example|TemplateBench</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Ajax Form Validation </h1>
<form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
<div class="alert alert-danger display-error" style="display: none">
<ul>
</ul>
</div>
<div class="form-group">
<div class="controls">
<input type="text" id="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="controls">
<input type="email" class="email form-control" id="email" placeholder="Email" >
</div>
</div>
<div class="form-group">
<div class="controls">
<input type="text" id="subject" class="form-control" placeholder="Subject" >
</div>
</div>
<div class="form-group">
<div class="controls">
<textarea id="message" rows="7" placeholder="Massage" class="form-control"></textarea>
</div>
</div>
<button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Send Message</button>
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var subject = $("#subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "/postRequest.php",
dataType: "json",
data: {name:name, email:email, subject:subject, message:message},
success : function(data){
if (data.code == "200"){
alert("Success: " +data.msg);
} else {
var m = data.msg;
$.each(m, function( index, value ) {
$(".display-error ul").append("<li>"+ value +"</li>");
});
$(".display-error").css("display","block");
}
}
});
});
});
</script>
</html>
2.postRequest.php
<?php
$errorMSG = array();
/* NAME */
if (empty($_POST["name"])) {
$errorMSG[] = "Name is required";
} else {
$name = $_POST["name"];
}
/* EMAIL */
if (empty($_POST["email"])) {
$errorMSG[] = "Email is required";
} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
$errorMSG[] = "Invalid email format";
}else {
$email = $_POST["email"];
}
/* MSG SUBJECT */
if (empty($_POST["subject"])) {
$errorMSG[] = "Subject is required";
} else {
$subject = $_POST["subject"];
}
/* MESSAGE */
if (empty($_POST["message"])) {
$errorMSG[] = "Message is required";
} else {
$message = $_POST["message"];
}
if(empty($errorMSG)){
// Do Your stuff
$msg = "Form submit successfully";
echo json_encode(['code'=>200, 'msg'=>$msg]);
exit;
}
echo json_encode(['code'=>404, 'msg'=>$errorMSG]);
?>
Just copy these code and create the files and your code will be ready for execute.
You can quick run our example by following command, so run bellow command for run PHP project
php -S localhost:8000
You can check by visiting below url
http://localhost:8000
I Hope you enjoy this tutorial. Please share this post with other developers and don’t forget to like our facebook page.
Thank You
8 Comments
Sangeet Kumar
November 26, 2017 at 4:42 amThanks sir
This is code very helpful
sunil kumar
November 28, 2017 at 4:53 amreally Helpfull Thanks man 🙂
memblopy
December 1, 2017 at 3:01 amYou made some good points there. I did a search on the issue and found most persons will approve with your site.
Abhi Singh
December 22, 2017 at 8:38 pmThanks Memblopy. Don’t forget to share this.
EnasyGaf
December 13, 2017 at 8:31 amQuite right! It seems to me it is very good idea. Completely with you I will agree.
EnasyGaf
December 14, 2017 at 9:51 pmYou made some respectable points there. I seemed on the internet for the issue and located most people will go together with with your website.
Abhi Singh
December 22, 2017 at 8:49 pmThanks EnasyGaf. Hope you enjoy our tutorial. Don’t forget to like and share .
Joseph Mboozi
February 18, 2018 at 7:39 pmI want on creating folders e.g I have created HTML So now I want to create php folder i am supporse to put it inside HTML or just create the I created HTML ?