Как задать проверку заполненности обязательных полей формы и очищать форму после отправки?

Question

[kellyhelly]

Не получается прикрутить проверку заполненности полей. Выдаёт окно, что поля не заполнены, но заявку отправляет, перекидывает на страницу Спасибо.
При возврате назад все поля заполнены, не очищаются

Заранее спасибо!!

Код обработчика (phpmailer):

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

require_once('Exception.php');
require_once('PHPMailer.php');
require_once('SMTP.php');
$mail = new PHPMailer();
$mail->CharSet = 'utf-8';

$name = $_POST["name"];
$phone = $_POST["phone"];
$email = $_POST["email"];
$city = $_POST["city"];  

$mail->SMTPDebug = 0;                               // Enable verbose debug output

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = 'smtp.yandex.ru';  																							// Specify main and backup SMTP servers
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = '[e-mail]'; // Ваш логин от почты с которой будут отправляться письма
$mail->Password = 'xxx'; // Ваш пароль от почты с которой будут отправляться письма
$mail->SMTPSecure = 'ssl';                            // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to / этот порт может отличаться у других провайдеров

$mail->setFrom('[e-mail]'); // от кого будет уходить письмо?
$mail->addAddress('[e-mail]');     // Кому будет уходить письмо 
//$mail->addAddress('[e-mail]');               // Name is optional
//$mail->addReplyTo('[e-mail]', 'Information');
//$mail->addCC('[e-mail]');
//$mail->addBCC('[e-mail]');
//$mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
//$mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name


$mail->isHTML(true);                                  // Set email format to HTML

$mail->Subject = 'Новая заявка со страницы ' . $_POST['page'];
$mail->Body    = 'Имя: ' .$name . '<br>Телефон: ' .$phone. '<br>Эл. почта: ' .$email. '<br>Город: ' .$city. ; 
$mail->AltBody = '';

if(!$mail->send()) {
  echo 'Письмо не может быть отправлено. ';
  echo 'Ошибка: ';
} else {
  header('location: ../спасибо-за-заказ.htm');
  die();
}                            
?>

Код js:

$(document).ready(function() {

// Добавляем маску для поля с номера телефона
$('.phonemasked').each(function(){
  $(this).mask('[phone]');
});
$(".user_request").submit(function() {
  if ( !this.checkValidity() )
    alert('Пожалуйста, заполните обязательные поля.');
  else {
    $.ajax({
      type: "POST",
      url: "mail.php",
      data: $( this ).serialize()
});
      // очищаем поля
 
      $('#name').val('');
      $('#phone').val('');
      $('#mail').val('');
      $('#city').val('');
    });
  });
  });

Comments

[Владислав Лысков]

на js точно приходит? с html отправляете точно post? покажите html код

[kellyhelly]

Владислав Лысков,

<form action="/form/mail.php" method="POST" class="row user_request" id="form" name="contact"  novalidate enctype="multipart/form-data">                
    <input type="hidden" name="page" value="Смена адреса - заявка" />
    <div class="inputwrap">
        <label for="name">Ваше имя<sup>*</sup></label>
        <input type="text" id="name" required name="name" class="text-input" />
    </div>

    <div class="inputwrap">
        <label for="phone">Контактный телефон<sup>*</sup></label>
        <input id="phone" type="text" name="phone" class="text-input phonemasked" placeholder="[phone]" required />
    </div>
    
    <div class="inputwrap">
        <label for="email">Электронная почта<sup>*</sup></label>
        <input id="email" type="email" name="email" class="text-input" required />
    </div>

    <div class="inputwrap">
        <label for="city">Город</label>
        <input id="city" type="text" name="city" class="text-input" />
    </div>

    <span class="result_message"></span>

    <div class="inputwrap checkwrap">
        <input type="checkbox" name="check_agreement" id="check_agreement_bottom" required>
        <label for="check_agreement_bottom">
            С <a target="_blank" href="/согласие-на-обработку.htm">условиями</a> обработки персональных данных ознакомлен
            </label>
    <div class="g-recaptcha" data-sitekey="xxx" required></div>

    </div>
    
        <div class="inputwrap" style="float: right;">
        <input type="submit" name="submit" class="button" value="Отправить">
    </div>

[Владислав Лысков]

kellyhelly, так не заработает, action уберите <form method="POST" ...

[kellyhelly]

Владислав Лысков, да, так перестало пропускать без заполненных полей и очищает форму после отправки.
но правда теперь не перекидывает на страницу спасибо (хотя форма на почту приходит по шаблону обработчика

[Владислав Лысков]

kellyhelly,
из php файла это убери header('location: ../спасибо-за-заказ.htm');
и в js

else {
    $.ajax({
      type: "POST",
      url: "mail.php",
      data: $( this ).serialize(),
     success: function (data) {
         window.location.href = "...";
           },
})

[kellyhelly]

Владислав Лысков, да, получилось. спасибо большое!
Ещё хотела спросить, Вы случайно не знаете, как можно сделать капчу обязательной?
Сейчас её можно не заполнять и соответственно форма отправляется

[Владислав Лысков]

kellyhelly, судя по всему у вас google recaptcha, она валидицируется на стороне гугла, проверьте всели ключи там созданы корректно, и правильно или указан домен
и подключена ли эта хрень после формы

<script src='https://www.google.com/recaptcha/api.js'></script>

[kellyhelly]

Владислав Лысков, ключи верные, домен тоже. api также подключена, но форма заполняется и без прохождения капчи
в документации как-то никакой информации в этом плане не нашла

[Владислав Лысков]

kellyhelly, не встречал такого, попробуй убрать required, мб конфликт какой

[kellyhelly]

Владислав Лысков, по-другому никак не должна задаваться проверка капчи? попробую убрать, спасибо за помощь!!

[Владислав Лысков]

kellyhelly, незнаю, но и тут

<form action="/form/mail.php" method="POST" class="row user_request" id="form" name="contact"  novalidate enctype="multipart/form-data">

name не нужен и novalidate попробуй убрать