Ajax form validation in php - php

Question

Im trying to create ajax from with php validation, let explain with screenshot. while validating form im getting all error in same place…
what im trying to get is individual validation for field like below
And after form is submitted i want display success message at the top of form but im getting success message on all field
html form data (index.php)
<form id="first_form" method="POST" action="form.php">
<p class="form-message"></p>
<div class="mb-3">
<input type="text" class="form-control" id="name" name="name" placeholder="Name:">
<p class="form-message"></p>
</div>
<div class="mb-3">
<input type="tex" class="form-control" id="email" name="email" placeholder="Email:">
<p class="form-message"></p>
</div>
<div class="mb-3">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone:">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="address" name="address" placeholder="Address:">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject:">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="services" name="services" placeholder="Services:">
</div>
<div class="mb-3">
<textarea class="form-control" rows="5" id="message" name="message" placeholder="Leave Your Message..."></textarea>
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary">Submit</button>
js code:
$(document).ready(function() {
$("#first_form").submit(function(event) {
event.preventDefault();
name = $("#name").val();
email = $("#email").val();
phone = $("#phone").val();
address = $("#address").val();
subject = $("#subject").val();
services = $("#services").val();
message = $("#message").val();
submit = $("#submit").val();
$(".form-message").load("form.php", {
name: name,
email: email,
phone: phone,
address: address,
subject: subject,
services: services,
message: message,
submit: 'submitted'
});
});
});
form.php data
if (isset($_POST['submit'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = "Contact Form";
$mailTo = "hello#develoweb.com";
$headers = "From: ".$email;
$txt = "You have received a message from ".$name.
".\n\n".$message;
$errorEmptyname = false;
$errorEmptyemail = false;
$errorEmptymessage = false;
$errorEmail = false;
if (empty($name)) {
echo "<span class='form-error'>Name Field cannot be empty</span> ";
//$errorEmptyName = true;
}
if (empty($email)) {
echo "<span class='form-error'>Email Field cannot be empty</span>";
//$errorEmptyemail = true;
}
if (empty($message)) {
//$errorEmptymessage = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>
Write a valid e-mail addres </span>";
$errorEmail = true;
}
else {
echo "<span class='form-success'>
Thank you for your message!<br>
I'll get back to you as soon as I can.</span>";
mail($mailTo, $subject, $body, $headers);
}
}
else{
echo "There was an error!";
}
what i have understand, im not getting individual validation error in individual field bcz class is same, how can i append error to related fields
i havent used js validation bcz i want to some validation for spammer to prevent spam mail and as we know while viewing source code we can easily view code for validation too, so pefer validation in php