All for Joomla The Word of Web Design

Ajax form validation in php

Ajax Form Validation Example TemplateBench

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:

Ajax Form Validation Example TemplateBench

Let see all code in the example.

1.index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?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

You can check by visiting below url

I Hope you enjoy this tutorial. Please share this post with other developers and don’t forget to like our facebook page.

Thank You

Abhi Singh16 Posts

Web Developer

You may also like

What's new in Laravel 5.6

What’s New in laravel 5.6

  • January 19, 2018
Laravel and CodeIgniter

Laravel vs CodeIgniter

  • January 8, 2018

How To Create Css Loader

  • November 17, 2017

Detect device type in php

  • November 12, 2017
custom 404 page laravel

Laravel custom 404 page

  • November 12, 2017

8 Comments

  • Sangeet Kumar Reply

    November 26, 2017 at 4:42 am

    Thanks sir
    This is code very helpful

    • sunil kumar Reply

      November 28, 2017 at 4:53 am

      really Helpfull Thanks man 🙂

  • memblopy Reply

    December 1, 2017 at 3:01 am

    You made some good points there. I did a search on the issue and found most persons will approve with your site.

    • Abhi Singh Reply

      December 22, 2017 at 8:38 pm

      Thanks Memblopy. Don’t forget to share this.

  • EnasyGaf Reply

    December 13, 2017 at 8:31 am

    Quite right! It seems to me it is very good idea. Completely with you I will agree.

  • EnasyGaf Reply

    December 14, 2017 at 9:51 pm

    You 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 Reply

      December 22, 2017 at 8:49 pm

      Thanks EnasyGaf. Hope you enjoy our tutorial. Don’t forget to like and share .

      • Joseph Mboozi Reply

        February 18, 2018 at 7:39 pm

        I 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 ?

Leave a Comment

Login

Welcome! Login in to your account

Remember me Lost your password?

Lost Password