отправка формы на почту

1

0

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

 $('form').submit(function(e) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "mailer/smart.php",
        data: $(this).serialize()
      }).done(function() {
        $(this).find("input").val("");
        $('#consultation, #order').fadeOut();
        $('.overlay, #thanks').fadeIn('slow');

        $('form').trigger('reset');
      });
      return false
    });

Урок 3.21. Практика. Отправка писем с сайта

student_8L0ZPJxf

4 years ago

Что надо изменить в условиях валидатора? У меня код идентичный тому, что в уроке, но заявка уходит несмотря на пустые строки и ошибку "ВВедите имя/телефон/email"

Светлана Столярова

4 years ago

А может script в html неверно подключен?

Ekaterina Umetckaia

4 years ago

Это из курса Ивана Петриченко.
Добавьте к каждой форме атрибут action, т.к. разные формы в принципе на сервере могут обрабатываться разными php-файлами

<form id="#consultation-form" method="post" action="mailer/smart.php">...</form>
...
<form method="post" action="mailer/smart.php">...</form>

В JS валидацию и submit заменить на этот код.

$("form").each(function () {
  $(this).validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      },
      phone: "required",
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      name: {
        required: "Пожалуйста, введите свое имя",
        minlength: jQuery.validator.format("Введите {0} символа!")
      },
      phone: "Пожалуйста, введите свой телефон",
      email: {
        required: "Пожалуйста, введите свою почту",
        email: "Неправильно введен адрес почты"
      }
    },
    submitHandler: function (form) {
      $.ajax({
        type: "POST",
        url: $(form).attr('action'),
        data: $(form).serialize()
      }).done(function () {
        $(form).find("input").val("");
        $('#consultation, #order').fadeOut();
        $('.overlay, #thanks').fadeIn('slow');
        $(form).trigger('reset');
      });
      return false;
    }
  });
});

Progressive

2 years ago

Написать условие над, наверное об этом говорилось в уроке до, про валидность форм. Сейчас уже не помню, но в курсе js этому можно научиться.

Alex B

4 years ago

Все прописано

выкладываю валидность форм и код html на всякий случай

js

function validateForms(form){
      $(form).validate({
        rules: {
          name: {
            required: true,
            minlength: 2
          },
          phone: "required",
          email: {
            required: true,
            email: true
          }
        },
        messages: {
          name: {
            required: "Пожалуйста, введите свое имя",
            minlength: jQuery.validator.format("Введите {0} символа!")
          },
          phone: "Пожалуйста, введите свой номер телефона",
          email: {
            required: "Пожалуйста, введите свою почту",
            email: "Неправильно введен почтовый адрес"
          }
        }
      });
    };

    validateForms('#consultation-form');
    validateForms('#consultation form');
    validateForms('#order form');

html

<div class="overlay">
  <div class="modall" id="consultation">
    <div class="modall__close">×</div>
   <div class="modall__subtitle">Просто заполните форму заявки</div>
   <div class="modall__descr">и мы перезвоним вам в течении 10 минут</div>
   <form class="feed-form feed-form__mt-25" action="#">
    <input required placeholder="Ваше имя" type="text" name="name">
    <input required placeholder="Ваш телефон"  name="phone">
    <input required placeholder="Ваш E-mail" type="email" name="email">
    <button class="button button_submit button_submit_media">заказать кОНСУЛЬТАЦИЮ</button>
  </form>
  </div>

  <div class="modall" id="order">
    <div class="modall__close">×</div>
   <div class="modall__subtitle">Ваш заказ:</div>
   <div class="modall__descr">Пульсометр Polar FT1</div>
   <form class="feed-form feed-form__mt-25" action="#">
    <input  placeholder="Ваше имя" type="text" name="name">
    <input  placeholder="Ваш телефон"  name="phone">
    <input  placeholder="Ваш E-mail" type="email" name="email">
    <button class="button button_submit button_submit_media">Купить</button>
  </form>
  </div>

  <div class="modall modall__mini" id="thanks">
    <div class="modal__close">×</div>
   <div class="modal__subtitle">Спасибо за вашу заявку!</div>
   <div class="modal__descr">Наш менеджер свяжется с вами
    в ближайшее время!</div>
  </div>
</div>

student_8L0ZPJxf

4 years ago

Та же проблема, посижу послушаю что ответят...

Светлана Столярова

4 years ago

а настройки смотрели валидатора?

как я вижу есть условие что имя должно быть больше 2х симовлов и есть валидация емаил,

а условий на пустую строку нету и на ввод чисел вместо строк в phone...

Alex B

4 years ago

7 ответов