0

Подскажите, пжлст! Есть форма заказа на сайте.

<form id="promo-form" action="#">
  <div class="form-group">
    <input name="name" placeholder="Ваше имя" type="text" class="form-control">
  </div>
  <div class="form-group">
    <input name="phone" placeholder="Ваш телефон" type="tel" class="form-control">
  </div>
  <button class="btn btn-block btn-info button_submit" id="btn_promo">Заказать сейчас</button>
</form>

Скриптом сначала срабатывает валидация (поля подсвечиваются ошибкой, если их не заполнить). Но через 2-3 секунды (!) форма уходит пустая. На почту приходит заявка (пустая естесна, ее же не успели заполнить), с этим все в порядке. Но почему уходит, ведь стоит валидация на пустые поля.

Скрипт валидации и отправки:

//валидация форм
function validateForms(form) {
  $(form).validate({
    rules: {
      name: "required",
      phone: "required",
    },
    messages: {
      name: "Пожалуйста, введите свое имя",
      phone: "Пожалуйста, введите свой номер телефона",
    }
  });
};
validateForms('#promo-form');
validateForms('#order-form');

//Отправка данных из формы
$('form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "mailer/smart.php",
    data: $(this).serialize()
  }).done(function() {
    $(this).find("input").val("");
    $('#order-form').fadeOut();
    $('.overlay, #thanks').fadeIn('slow');
    $('form').trigger('reset');
  });
  return false;
});

Что тут не так? В чем моя ошибка?

Пысы. Запускала через OpenServer и MAMP - результат одинаковый. Просто вычитывала, что иногда в этом может быть проблема

ПыПыСы. Код отправки формы на почту

<?php 

$name = $_POST['name'];
$phone = $_POST['phone'];

require_once('phpmailer/PHPMailerAutoload.php');
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';

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

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = 'smtp.mail.ru';  // Specify main and backup SMTP servers
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = '[email protected]';                 // Наш логин 
$mail->Password = 'xxx';                           // Наш пароль от ящика
$mail->SMTPSecure = 'ssl';                            // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465;                                    // TCP port to connect to

$mail->setFrom('ххх@mail.ru', 'сайт');   // От кого письмо (повторить логин ящика)
$mail->addAddress('мояПочта@mail.ru');     // Add a recipient
$mail->isHTML(true);                                  // Set email format to HTML

$mail->Subject = 'Заявка с сайта';
$mail->Body    = '
        Пользователь оставил данные <br> 
    Имя: ' . $name . ' <br>
    Номер телефона: ' . $phone . '';

if(!$mail->send()) {
    return false;
} else {
    return true;
} 

?>
1
  • А с чего вы сделали вывод что это именно данные с формы на ваш скрипт не приходят, а не неправильно настроенный скрипт отправки почты, который не те данные вбивает? Этот скрипт, пожалуйста, добавьте в вопрос. Commented 4 мая 2020 в 7:38

1 ответ 1

0

Это из-за того что у вас код не соответствует спецификации - вам нужно использовать submitHandler, а не $(form).submit. Этот обработчик вызывается когда данные в форме соответствуют правилам проверки, а $(form).submit - вообще для всей формы, вне зависимости проверки. В итог код должен быть:

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
</head>
<body>
<form id="promo-form" action="#">
              <div class="form-group">
                <input name="name" placeholder="Ваше имя" type="text" class="form-control">
              </div>
              <div class="form-group">
                <input name="phone" placeholder="Ваш телефон" type="tel" class="form-control">
              </div>
              <button class="btn btn-block btn-info button_submit" id="btn_promo">Заказать сейчас</button> 
            </form>
            <script>
$('#promo-form').validate({
  rules: {
    name: "required",
    phone: "required"
  },
  messages: {
    name: "Пожалуйста, введите свое имя",
    phone: "Пожалуйста, введите свой номер телефона",
  },
  submitHandler: function(form) {
    $.post({
      url: "smart.php",
      data: $(form).serialize(),
      success : function(data) { console.log(data); }
    });
  }
});
</script>
</body>
</html>

smart.php:

<?php
     echo 'Name: ' . $_POST['name'] . ', phone: ' . $_POST['phone'] . PHP_EOL;

В консоли выводит то, что вы вводите в форму.

6
  • Что-то у меня таким способом письмо перестало приходить... Commented 4 мая 2020 в 8:03
  • Обновил и добавил пример на jsFiddle Commented 4 мая 2020 в 9:02
  • Спасибо, Форма не уходит сама по себе теперь. НО :) данные из формы приходят пустые сейчас, даже если я их заполняю :( Commented 4 мая 2020 в 11:48
  • Я добавил минимально воспроизводимый код для двух файлов, за недочётом пути к smart.php думаю будет достаточно. Commented 4 мая 2020 в 14:53
  • Спасибо вам большое! На самом деле очень помогли! Commented 4 мая 2020 в 15:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.