How to use php validation in ajax request in wordpress? - php

Question

I made a contact form(custom) that uses AJAX to send out the message. Now I am unclear on how to validate the form.
AJAX Request:
$("#contact-form").on("submit", function (e) {
e.preventDefault();
var action = "contact_form";
$("#submit, #clear").prop("disabled", true);
$("#submit").html("Sending");
$.ajax({
url: $(this).attr("action"),
method: "post",
data: {
name: $("#name").val(),
email: $("#email").val(),
phone: $("#phone").val(),
subject: $("#subject").val(),
message: $("#message").val(),
action: action,
},
success: function () {
$("header").append(
"<div id='alert' class='alert alert-success alert-dismissible fixed-top' role='alert' >" +
"<p class='text-center'>Success</p>" +
"<button type = 'button' class='close' data-dismiss = 'alert'>×</button>" +
"</div>"
);
$("#submit, #clear").prop("disabled", false);
// $("#contact-form input,textarea").val("");
grecaptcha.reset();
$("#submit").html("Send");
},
error: function () {
$("header").append(
"<div id='alert' class='alert alert-danger alert-dismissible fixed-top' role='alert' >" +
"<p class='text-center'>Error</p>" +
"<button type = 'button' class='close' data-dismiss = 'alert'>×</button>" +
"</div>"
);
$("#submit, #clear").prop("disabled", false);
grecaptcha.reset();
$("#submit").html("Send");
},
});
});
});
Functions.php:
function contact_form() // this is the action data variable we set in ajax
{
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$message = $_POST['message'];
// preparing parameters for wp_mail();
$to = "mail#example.com";
$msg = "
Name: $name
Email: $email
Phone: $phone
$message
";
// sending mail using wp_mail function
wp_mail($to, $subject, $msg);
wp_die(); // must use wp_die() to avoid unwanted output from wordpress
}
// in first parameter prefix function name with wp_ajax_
// this action is required in order to recieve data sent from ajax
add_action( 'wp_ajax_contact_form', 'contact_form' );
add_action( 'wp_ajax_nopriv_contact_form', 'contact_form' );
Now what I usually do when I am not trying to use ajax is preform validaiton in the php file and for example if captcha is invalid I append status to GET method and return error. If anyone can point me in the right directon on how to validate in php file and return info to frontend or should I do the validation in the js file? I'm quite confused there is so many articles on the web I honestly have no idea where to look.
P.S Everything is working perfectly just left to validate it.

Answer 1

Validate both ways. JS validation makes for a smooth UX and takes care of most concerns regarding valid email addresses, non-empty fields etc.
PHP validation will ensure that your functions don't error out and can allow you to do some server side checks (like exact message hasn't been sent before etc)
In php, do your validation checks and prepare a json response of any errors, then echo that back (rather than proceed with the code) if there are errors. In JS catch the errors in your success block - which right now doesn't listen for any response.
PHP:
if ($errors) {
echo json_encode(array('status' => 'error', 'message' => 'Your email message has objectionable content'));
wp_die();
}
if (!wp_mail($to, $subject, $msg)) {
echo json_encode(array('status' => 'error', 'message' => 'Your email message did not send for some reason'));
wp_die();
}
echo json_encode(array('status' => 'success');
wp_die();
Your JS
// ajax...
$.ajax({
... your props
dataType: 'json',
success: function (response) {
if (response && response.status == 'error'){
$('errors').html("Sorry, your message did not get sent due to these errors: " + response.message);
return;
} else {
// .. success