Почему форма на сайте отправляется даже с пустыми полями?

Question

[Artyom108]

Ребят, кто знает, помогите, малоопытен в js, валидация формы вроде срабатывает, если нажать на отправку формы, но после этого форма всё равно отправляется,даже если поля пустые. (использую jquery)

$('[data-modal=consultation]').on('click', function(){
    $('.overlay, #consultation').fadeIn('slow');
  });
  $('.modal__close').on('click', function() {
    $('.overlay, #consultation, #thanks').fadeOut('slow');
  });

  function valideForms(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: "Неправильно введён адрес почты"
      }
  }
});       
  }

  valideForms('#consultation-form');
  valideForms('#consultation form');
  
  $('input[name=phone]').mask("[phone]");
    $('form').submit(function(e) {
      e.preventDefault();
        $.ajax({
          type: "POST",
          url: "mailer/smart.php",
          data: $(this).serialize()
      }).done(function() {
        $(this).find("input").val("true");
        $('#consultation').fadeOut();
        $('.overlay, #thanks').fadeIn('slow');
        $('form').trigger('reset');
      });
      return false;
  });

Comments

[Павел]

$('form').submit(function(e) {
после этого кода у тебя должна быть валидация, а она у тебя где?

еще e.preventDefault(); и return false; в твоем случае это одно и тоже

[Artyom108]

Павел, ну вот я тоже думаю, что я намудрил.. использую валидацию jquery, чуть выше идёт " function valideForms(form) { " и что делать с preventDefault?

[Павел]

Artyom108,
ну preventDefault просто можно убрать если есть return false; или наоборот.

я бы сделал как то так

$('input[name=phone]').mask("[phone]");
    $('form').submit(function(e) {
        e.preventDefault();
        if(valideForms('#consultation-form')){
            $.ajax({
              type: "POST",
              url: "mailer/smart.php",
              data: $(this).serialize()
          }).done(function() {
            $(this).find("input").val("true");
            $('#consultation').fadeOut();
            $('.overlay, #thanks').fadeIn('slow');
            $('form').trigger('reset');
          });
        }
      return false;
  });

но не знаю по поводу функции валидации, если она позволяет вернуть true or false то так будет гуд, а если нет , надо искать как вернуть тот самый булев

[Artyom108]

Павел, спасибо, попробую и напишу

[Semantic.Moscow]

а чего бы кроме required не поставить на поля формы простенькие pattern`ы c регулярками, чтобы лишний раз не дёргать бэкенд?

[Artyom108]

Semantic.Moscow, спасибо за ответ, а как это на деле, если не сложно показать.. ?

[Semantic.Moscow]

Artyom108,

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required />

примеры регулярок очень легко гуглятся

[Artyom108]

Павел, попробовал, к сожалению не помогло, пока не могу понять в чём дело... по идее всё должно отрабатывать гуд...

Answer 1

[Alexey2236]

В функции сделать проверку на пустую строку и тд.
Например.
function () {
if(input.value === "") {
return;
}
}