Question

我有一个联系表，该表在服务器端执行验证和错误生成，并通过JSON传递错误。 Javascript部分仅处理错误打印和后退字段输入。

此表单将原始版本的Javascript以及Fetch API用于JSON / AJAX部分。问题有两个：

表单继续循环浏览并重新打印无效字段的错误消息，这意味着为同一字段打印了两个或更多错误消息（取决于按下提交按钮的次数），但无论出于何种原因，Javascript没有回送输入，因此PHP脚本认为一切无效。

我有此表单在JQuery中能正常工作，但我不确定Vanilla版本的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.= "\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;

Answer 1

正如我所见，每次使用变量->“ helpBlock”一次又一次地使用新的div重新创建错误消息。如果您两次张贴表格，并且相同的错误将不固定在表格中，您将在当前错误消息下再次重新打印它。因此，基本上，如果有一些现有错误，则需要在post方法之前清理错误。

Answer 2

您的代码有两个主要问题。

数据发送不正确。在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()
});

在此处找到有关Request（）的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

先前的错误消息不会清除。每次发生错误时，都会创建并附加带有错误消息的div元素。在调用fetch之前，删除所有先前创建的带有错误消息的div。

由于这些div都有一个名为help-block的类，因此可以在调用fetch之前调用它。

document.querySelectorAll(".help-block").forEach(e => e.parentNode.removeChild(e));

验证消息不断重印

2 个答案: