I have a contact form that performs validation and error generation on the server side and passes on the errors via JSON. The Javascript portion only handles the error printing and pushing back the field inputs.
This form uses vanilla version of Javascript along with Fetch API for the JSON/AJAX portion. The issue is two fold:
The form continues to cycle through and reprint error messages for invalid fields, meaning that there are two or more error messages printed for the same field (depends on the number of times submit button is pressed) but also for whatever reason, Javascript isn't sending back the inputs, so PHP script thinks everything is invalid.
I have this form working perfectly in JQuery but I am not sure what am I missing with Vanilla version of JS?
Javascript:
document.querySelector("#form").addEventListener("submit", function(e){
//create variable for contact form url
var formURL = 'melonForm.php';
//prevent default submission
event.preventDefault();
//define form fields
var melonForm = {
'firstName' : document.querySelector('input[name=firstName]').value,
'lastName' : document.querySelector('input[name=lastName]').value,
'companyName' : document.querySelector('input[name=companyName]').value,
'companyAddress' : document.querySelector('input[name=companyAddress]').value,
'city' : document.querySelector('input[name=city]').value,
'state' : document.querySelector('select[name=state]').value,
'zipcode' : document.querySelector('input[name=zipcode]').value,
'emailAddress' : document.querySelector('input[name=emailAddress]').value,
'phoneNumber' : document.querySelector('input[name=phoneNumber]').value,
}
//define request variable
var formRequest = new Request(formURL, {
method: 'POST',
body: melonForm,
headers: new Headers()
});
//fetch
fetch(formRequest)
.then(function(formResponse) {
return formResponse.json();
})
.then(function(data) {
//handle server responses
if ( ! data.success) {
//handle error messages
//handle error message for firstName
console.log(data);
if (data.errors.firstName) {
document.getElementById("firstName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.firstName;
document.getElementById("firstName-group").append(helpBlock);
}
//handle errors for lastName
if (data.errors.lastName) {
document.getElementById("lastName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.lastName;
document.getElementById("lastName-group").appendChild(helpBlock);
}
//handle errors for companyName
if (data.errors.companyName) {
document.getElementById("companyName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyName;
document.getElementById("companyName-group").appendChild(helpBlock);
}
//handle errors for companyAddress
if (data.errors.companyAddress) {
document.getElementById("companyAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyAddress;
document.getElementById("companyAddress-group").appendChild(helpBlock);
}
//handle errors for city
if (data.errors.city) {
document.getElementById("city-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.city;
document.getElementById("city-group").appendChild(helpBlock);
}
//handle errors for state
if (data.errors.state) {
document.getElementById("state-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.state;
document.getElementById("state-group").appendChild(helpBlock);
}
//handle errors for zipcode
if (data.errors.zipcode) {
document.getElementById("zipcode-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.zipcode;
document.getElementById("zipcode-group").appendChild(helpBlock);
}
//handle errors for emailAddress
if (data.errors.emailAddress) {
document.getElementById("emailAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.emailAddress;
document.getElementById("emailAddress-group").appendChild(helpBlock);
}
//handle errors for phoneNumber
if (data.errors.phoneNumber) {
document.getElementById("phoneNumber-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.phoneNumber;
document.getElementById("phoneNumber-group").appendChild(helpBlock);
}
//handle errors for message
if (data.errors.message) {
document.getElementById("message-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.message;
document.getElementById("message-group").appendChild(helpBlock);
}
// handle errors for captcha ---------------
if (data.errors.captcha) {
swal({
title: "Error!",
text: data.errors.captcha,
icon: "error",
});
}
// handle errors for phpmailer ---------------
if (data.message) {
swal({
title: "Error!",
text: data.message,
icon: "error",
});
}
if (data.success) {
swal({
title: "Success!",
text: data.message,
icon: "success",
});
//document.getElementById("form").reset();
}
}
});
})
PHP:
<?php
//show errors - enable this
//ini_set('display_errors', 1);
//ini_set('display_startup_errors', 1);
//error_reporting(E_ALL);
//Var Dump (Debugging)
//var_dump($_POST);
//Load Required Components
require_once 'src/recaptcha_autoload.php';
require_once "functions.php";
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'src/Exception.php';
require 'src/PHPMailer.php';
require 'src/SMTP.php';
function validate($formData)
{
// Initiate Array
$validationMSG = array(); // array to hold validation errors
//$firstName = $formData['firstName'];
//$lastName = $formData['lastName'];
//$companyName = $formData['companyName'];
//$companyAddress = $formData['companyAddress'];
//$city = $formData['city'];
//$state = $formData['state'];
//$zipcode = $formData['zipcode'];
//$emailAddress = $formData['emailAddress'];
//$phoneNumber = $formData['phoneNumber'];
//$message = $formData['message'];
$pname_exp = '/^[a-zA-Z0-9\_]{2,20}/';
// Validate firstName
//if (!isset($formData['firstName'])) {
// $validationMSG['firstName'] = 'First Name is required.';
//}
// Check RegEx for First Name
//if (!preg_match($pname_exp, $formData['firstName'])) {
// $validationMSG['firstName'] = 'First Name is not valid.';
//}
if (!isset($formData['firstName'])) {
$validationMSG['firstName'] = 'First Name is required.';
}elseif (!preg_match($pname_exp, $formData['firstName'])){
$validationMSG['firstName'] = 'First Name is not valid.';
}
// Validate lastName
if (!isset($formData['lastName'])) {
$validationMSG['lastName'] = 'Last Name is required.';
}
// Check RegEx for Last Name
elseif (!preg_match($pname_exp, $formData['lastName'])) {
$validationMSG['lastName'] = 'Last Name is not valid.';
}
// Validate companyName
if (!isset($formData['companyName'])) {
$validationMSG['companyName'] = 'Company Name is required.';
}
// Validate companyAddress
if (!isset($formData['companyAddress'])) {
$validationMSG['companyAddress'] = 'Company Address is required.';
}
// Validate state
if (!isset($formData['state'])) {
$validationMSG['state'] = 'State is required.';
}
// Validate city
if (!isset($formData['city'])) {
$validationMSG['city'] = 'City is required.';
}
// Validate Zipcode - If Field is Empty
if (!isset($formData['zipcode'])) {
$validationMSG['zipcode'] = 'Zipcode is required.';
}
// Validate emailAddress
if (!isset($formData['emailAddress'])) {
$validationMSG['emailAddress'] = 'Email Address is required.';
}
// Check if emailAddress is a valid email address
elseif (!filter_var($formData['emailAddress'], FILTER_VALIDATE_EMAIL)) {
$validationMSG['emailAddress'] = 'Email address is not valid.';
}
//Validate phoneNumber
if (!isset($formData['phoneNumber'])) {
$validationMSG['phoneNumber'] = 'Phone Number is required.';
}
//Validate phoneNumber
elseif (preg_match('/^[0-9-\s]+$/D', $formData['phoneNumber'])) {
$validationMSG['phoneNumber'] = 'Must be a valid phone number.';
}
// Validate message
if (!isset($formData['message'])) {
$validationMSG['message'] = 'Message is required.';
}
if (!empty($validationMSG)) {
return $validationMSG;
}
else {
$captcha = checkCaptcha($formData['g-recaptcha-response']);
if(!$captcha['isSuccess']){
$validationMSG['captcha'] = 'ReCaptcha is required.';
return $validationMSG;
}
//End of Validation Function
}
}
// [
// 'isSuccess' => bool,
// 'errorCodes' => k: actually IDK :)
// ]
function checkCaptcha($g_recaptcha_response)
{
$recaptcha_secret_key = 'SECRET_PASSWORD';
// $recaptcha = new ReCaptchaReCaptcha($recaptcha_secret_key, new ReCaptchaRequestMethodCurlPost());
$recaptcha = new \ReCaptcha\ReCaptcha($recaptcha_secret_key);
$resp = $recaptcha->verify($g_recaptcha_response, $_SERVER['REMOTE_ADDR']);
return [
'isSuccess' => $resp->isSuccess(),
'errorCodes' => $resp->getErrorCodes(),
];
}
function sendMail($formData)
{
$mail = new PHPMailer(true); // Passing `true` enables exceptions
// Server settings
//$mail->SMTPDebug = 2; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.server.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'user@server.com'; // SMTP username
$mail->Password = 'SECRET_PASSWORD'; // SMTP password
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to
// Recipients
$mail->setFrom('user@server.com', 'Mailer');
$mail->addAddress('user@server.com', 'Joe User'); // Add a recipient
// Content
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'New Message from Contact Form';
// prepare email body
$body_message = "";
$body_message.= "Sender IP: " . get_client_ip() . "<br />";
// @todo: make the other rows the same way, i.e. $formData['key'];
$body_message.= "First Name: " . $formData['firstName'] . "<br />";
$body_message.= "Last Name: " . $formData['lastName'] . "<br />";
$body_message.= "Company Name: " . $formData['companyName'] . "<br />";
$body_message.= "Company Address: " . $formData['companyAddress'] . "<br />";
$body_message.= "City: " . $formData['city'] . "<br />";
$body_message.= "State: " . $formData['state'] . "<br />";
$body_message.= "Sender email: " . $formData['emailAddress'] . "<br />";
$body_message.= "Sender Phone: " . $formData['phoneNumber'] . "<br />";
$body_message.= "
" . $formData['message'];
$mail->Body = $body_message;
$mail->send();
}
/////////////////////////////////////////////////
// process
//this will be our whole response (jsoned later)
$response = [
//we'll change these later, possibly:
'success' => false,
'errors' => [],
// 'message' => 'There has been an issue sending your message!!!!',//could be an "OK" error message as well, depends on the 'success' key.
];
// Copy $_POST to $formData
$formData = $_POST;
// mock / change $formData if needed (for tests etc)
// $formData['blah'] = 'bleh';
//validate
$errors = validate($formData);
if(!empty($errors)){
$response['success'] = false;
$response['errors'] = $errors;
}else {//it's ok
//send it
try{
sendMail($formData);
//Print Success Message
$response['success'] = true;
$response['message'] = 'Message was Sent!';
}
catch(Exception $e) {
// Print phpMailer Error Message
$response['success'] = false;
$response['message'] = 'There has been an issue sending your message';
}
}
echo json_encode($response);
exit;
