Почему не работает форма обратной связи?

Question

[Anastasia Bondarenko]

Делаю форму обратной связи на сайт по видеоуроку, вроде все так же, как у автора, но форма не работает. Подозреваю, что не работает именно Js, так как браузер выдает ошибку, что обязательное поле пустое, хотя оно заполнено. Тем не менее, класс, который подсвечивает форму, если она не заполнена, навешивается корректно, т.е. валидация, как я понимаю, работает. Не могу понять, где ошибка, помогите, пожалуйста.

<div class="form">
                    <div class="main-font">Приглашаю тебя!</div>
                    <form action="#" id="form" class="form_body" method="POST">
                        <div class="input">
                            <input type="text" placeholder="Ваше Имя*" name="name" class="form_input _req">
                        </div>
                        <div class="input">
                            <textarea name="message" class="form_input" placeholder="Здесь можно оставить комметарий"></textarea>
                        </div>
                        <div class="button">
                            <button class="btn" id="btnForm">Я ПРИДУ</button>
                        </div>
                    </form>

document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('form');
form.addEventListener('submit', formSend);

async function formSend(e) {
    e.preventDefault();

    let error = formValidate(form);

    let formData = new FormData(form);

    if (error === 0) {
         form.classList.add('_sending');

         let response = await fetch('sendmail.php', {
             method: 'POST',
             body: formData
         });
         if (response.ok) {
           let result  = await response.json();
           alert(result.message);
           form.reset();
           form.classList.remove('_sending');
         } else {
           alert('Ошибка');
           form.classList.remove('_sending');
         }
     } else {
        alert('Заполните обязательные поля');
     }
}

function formValidate(form) {
    let error = 0;
    const formReq = document.querySelector('._req');
    formRemoveError(formReq);

    if (formReq.value === '') {
        formAddError(formReq);
        error++;
    } 
} 

function formAddError(formReq) {
    formReq.parentElement.classList.add('_error');
    formReq.classList.add('_error');
}
function formRemoveError(formReq) {
    formReq.parentElement.classList.remove('_error');
    formReq.classList.remove('_error');
}
});

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'phpmailer/src/Exception.php';
require 'phpmailer/src/PHPMailer.php';

$mail = new PHPMailer(true);
$mail->CharSet = 'UTF-8';
$mail->setLanguage('ru', 'phpmailer/language/');
$mail->IsHTML(true);

$mail->setFrom('...');
$mail->addAddress('...');
$mail->Subject = '...';

$body = 'Ура! У тебя новый гость:';

if(trim(!empty($_POST['name']))){
    $body.='<p><strong>Имя:</strong> '.$_POST['name'].'</p>';
}
if(trim(!empty($_POST['message']))){
    $body.='<p><strong>Сообщение:</strong> '.$_POST['message'].'</p>';
}

$mail->Body = $body;

if(!$mail->send()) {
    $message = 'Ошибка';
} else {
    $message = 'Данные отправлены';
}

$response = ['message' => $message];

header('Content-type: application/json');
echo json_encode($response);
?>

Answer 1

[rapidum_alder]

Посмотри что у тебя в console в dev tools.
Там может быть ошибка.
И посмотри у тех ли ты добавил класс _req.
Добавь ещё html код для полноты картины

Comments

[rapidum_alder]

function formValidate(form) {
                    let error = 0;
                    const formReq = document.querySelector('._req');
                    formRemoveError(formReq);

                    if (formReq.value === '') {
                        formAddError(formReq);
                        error++;
                    }
                    return error;  //Забыл вернуть значение, из-за чего error у тебя не определен
                }

[Anastasia Bondarenko]

Консоль ошибок не выдает...
И с классами вроде все ок.
Такое ощущение, что просто Js не получает данные из формы и видит ее пустой

[rapidum_alder]

Если будет плохой ответ из php, то:
открой devTools (F12) и поищи во вкладке NETWORK элемент sendmail.php
Он появится после ajax запроса.
В этом элементе найдешь вкладку response (ответ)
В нем будет указана какая ошибка пришла из php.

[Anastasia Bondarenko]

Огромное спасибо! В Js исправила, но вышла ошибка с php. Последовала вашей инструкции, все заработало:)

Answer 2

[Anonimmus]

Углубляясь в js пропустить основу....
На этапе заполнения формы в коде допиши debbuger; при выполнении скрипта увидишь все переменные и поймёшь как он проводит провереу. Обычно дело не поставить точку.