I have code that validates the input inside the form and displays an error message in the div class="error" if condition is met. However, upon using AJAX to prevent page reload, the PHP validation no longer displays the message but still functions in the background. Does anyone why this is happening? How can I make the PHP validation work again? Thank you for help.
As you can see the validation error is supposed to show in $email_error
<form class="form_pro" action="index.php" method="post" role="form">
<input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>">
<div class="error"><?= $email_error ?></div>
<button name="submit" type="submit" class="action_button"></button>
</form>
The error message here displays inside the "div" prior to adding AJAX code
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["E-mail"])) {
$email_error = "E-mail is required";
} else {
$email = test_input($_POST["E-mail"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
}
After adding this to prevent page reload on submit, the PHP error message no longer shows
$( document ).ready(function() {
$(".form_pro").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/interuni_process.php",
data: $(this).serialize(),
success: function(data) {
},
error: function() {
}
});
});
});
1) you need to echo the error message in server side and get the response from server and append it to that div
HTML : htm_page.php
<form class="form_pro" action="index.php" method="post" role="form">
<input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>">
<div class="error"></div>
<button name="submit" type="submit" class="action_button"></button>
</form>
PHP :destination.php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email_error='';
if (empty($_POST["E-mail"])) {
$email_error = "E-mail is required";
} else {
$email = test_input($_POST["E-mail"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
echo $email_error;
}
AJAX : html_page.php
$( document ).ready(function() {
$(".form_pro").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "destination.php",
data: $(this).serialize(),
success: function(data) {
if(data.trim() !='')
{
$('.error').html('<h1>'+data+'</h1>');
}
},
error: function() {
}
});
});
});
Simple PHP error :
<div class="error"><?= $email_error ?></div>
When you simply submit the form and according to your condition the validation fails then $email_error is set and when the page is loaded , server interprets the error and print it.
When you submit through AJAX
It checks the error validate and if fail $email_error is set but as the page s not reloaded is not interpreted . SO when you need to submit through ajax instead of setting the error echo it and it will work fine
As you have prevented the page load, you can not see the error which were rendreing on server and display in frontend.
To achieve this you need edit your jquery code
$( document ).ready(function() {
$(".form_pro").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/interuni_process.php",
data: $(this).serialize(),
success: function(data) {
},
error: function(data, errorThrown)
{
$('.error').html(errorThrown);
}
});
});
});
You need to modify your PHP to return a response with either success response or the error details and then inside your Javascript "success" function you need to parse the response and if it's an error response you need to update your DOM accordingly.
Simply Ajax doesn't work with PHP validation, because the Ajax error part means that the ajax side failed not the PHP validation !!! so it won't go to the error part if the PHP validation failed, how ever you can still make the submit return false and do something like this in JS&Ajax in the success part:
success: function(data) {
if(data.error)
{
alert(data.error);
return false;
}