Phpmailer + ajax + jquery, доработка формы, как сделать проверку на заполненность поля?

Пытаюсь доработать форму.

Отправка происходит через Phpmailer.
У меня так js для формы сделан, что он не привязан к форме, как мне к определенной форме по id привязать?
Или в этом смысла нет, ибо когда я кликаю на кнопку отправить, у меня срабатывает запрос внутри формы, и там далее идет в js.

Как вывести ошибку если поле не заполнено, допустим применять класс к полям которые надо заполнить, чтобы они подсвечивались красным, чтобы не выводить для каждого поля в форме, мол заполните фио, заполните телефон и т.д.

На данный момент у меня ничего не вылезает, если поля пустые, а тупо отправляет и выводит сообщение что все ок.

Сама форма.
<form method="post" id="callback" onsubmit="send(event, 'callback.php')">
<input type="text" name="f_phone" class="f_phone" placeholder="+7 (___) ___-____">
<button type="submit">Перезвонить мне</button>
</form>


js
<script>
    function send(event, php) {
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
      var req = new XMLHttpRequest();
      req.open('POST', php, true);
      req.onload = function() {
        if (req.status >= 200 && req.status < 400) {
          json = JSON.parse(this.response);
          console.log(json);

          if (json.result == "success") {
            alert("Сообщение отправлено, в ближайшее время Вам перезвонит менеджер.");
            $('#callback')[0].reset(); //чистим заполненные поля в форме
          } else {
            alert("Ошибка. Сообщение не отправлено, попробуйте повторить действия позднее.");
          }
          // Если не удалось связаться с php файлом
        } else {
          alert("Ошибка сервера. Номер: " + req.status);
        }
      };

      // Если не удалось отправить запрос. Стоит блок на хостинге
      req.onerror = function() {
        alert("Ошибка отправки запроса");
      };
      req.send(new FormData(event.target));
    }
  </script>


phpmailer
<?php

    require_once __DIR__ . "/vendor/autoload.php";

    $f_phone = $_POST['f_phone'];

    $textBase = "Номер телефона: " . $f_phone . "";

    $textAdmin = "Новый запрос обратного звонка от " . date("Y-m-d H:i:s") . " по времени сервера, данные
    " . $textBase . "
    ";

try {
  $text_html = nl2br($textAdmin);
  $sPort = 465;
  $sSecure = "ssl";
  $sUsername = "0000000000";
  $sPassword = "00000000000";
  $sHost = "smtp.yandex.ru";
  $sFromEmail = "0000000000";
  $sDomain = "0000000000000";

    $mail = new PHPMailer;
    $mail->isSMTP();
    $mail->SMTPDebug = 0;
    $mail->Debugoutput = 'html';
    $mail->Host = $sHost;
    $mail->Port = $sPort;
    $mail->SMTPAuth = true;
    $mail->SMTPSecure = $sSecure;
    $mail->Username = $sUsername;
    $mail->Password = $sPassword;
    $mail->setFrom($sFromEmail, $sDomain);
    $mail->addAddress('0000000000000'); //сюда отправляем
    $mail->Subject = 'Новый запрос звонка на '.$sDomain;
    $mail->msgHTML($text_html);
    $mail->AltBody = $textAdmin;
    $mail->CharSet = "utf-8";

    // Проверяем отравленность сообщения
if ($mail->send()) {$result = "success";}
else {$result = "error";}

} catch (Exception $e) {
    $result = "error";
    $status = "Сообщение не было отправлено. Причина ошибки: {$mail->ErrorInfo}";
}

// Отображение результата
echo json_encode(["result" => $result, "resultfile" => $rfile, "status" => $status]);
?>
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
ws17
@ws17 Автор вопроса
Нашел решение мой задачи:

$(".valpro").each(function() {
          if (!$(this).val()) {
            $(this).addClass('validform');
            errors = true;
            alert('Заполните все важные поля.');
          } else {
            $(this).removeClass('validform');
          }
        });


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
NWCode Санкт-Петербург
от 150 000 до 250 000 ₽
Videonow Москва
от 250 000 до 300 000 ₽
19 сент. 2021, в 12:13
70000 руб./за проект
19 сент. 2021, в 11:08
7000 руб./за проект