Сообщения проверки продолжают перепечатывать - PullRequest
Новая
       2

Сообщения проверки продолжают перепечатывать

0 голосов
/ 04 декабря 2018

У меня есть контактная форма, которая выполняет проверку и генерацию ошибок на стороне сервера и передает ошибки через JSON.Часть Javascript обрабатывает только ошибки, возникающие при печати и возвращении полей ввода.

В этой форме используется ванильная версия Javascript вместе с Fetch API для части JSON / AJAX.Проблема складывается в два раза:

Форма продолжает циклически повторять и перепечатывать сообщения об ошибках для недопустимых полей, что означает, что для одного и того же поля печатаются два или более сообщений об ошибках (зависит от того, сколько раз кнопка отправки быланажата) но также по какой-то причине Javascript не отправляет обратно входные данные, поэтому PHP-скрипт считает, что все недопустимо.

У меня эта форма отлично работает в JQuery, но я не уверен, что мне не хватает в Vanillaверсия JS?

Screenshot of the Issue

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.= "\n\n" . $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;

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

У вашего кода две основные проблемы.

Данные не отправляются должным образом .Тело, указанное в объекте Request, может быть только объектом Blob, BufferSource, FormData, URLSearchParams, USVString или ReadableStream.Вы установили простой объект JSON в качестве тела.Попробуйте использовать FormData, как показано ниже: 

var melonForm = new FormData();
melonForm.append("firstName", document.querySelector('input[name=firstName]').value);
melonForm.append("lastName", document.querySelector('input[name=lastName]').value);

var formRequest = new Request(formURL, {
    method: 'POST', 
    body: melonForm, 
    headers: new Headers()
});

Более подробную информацию о запросе () можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

Предыдущие сообщения об ошибках не удаляются. Каждый раз, когда естьошибка, элемент div с сообщением об ошибке создается и добавляется.Удалите все ранее созданные div с сообщениями об ошибках перед вызовом fetch.

Поскольку у вас есть класс help-block для этих div, вы можете вызвать его до вызова fetch. 

document.querySelectorAll(".help-block").forEach(e => e.parentNode.removeChild(e));
0 голосов
/ 04 декабря 2018

Как я вижу, вы снова и снова воссоздаете сообщения об ошибках, каждый раз с новым div с переменной -> "helpBlock".Если вы дважды разместите свою форму, и та же ошибка останется не исправленной в форме, вы перепечатаете ее снова под текущим сообщением об ошибке, как сейчас.Поэтому в основном вам нужно очистить ваши ошибки перед публикацией метода, если они есть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...