Форма выдаёт ошибку, что поля не заполнены, но на почту отправляет?

Question

[Ольга]

Добрый вечер! Нужна помощь с javascript.
По этому коду если не заполнять поля выдаётся ошибка, но форма на почту всё равно отправляется. Как исправить?

$(document).ready(function() {

// Добавляем маску для поля с номера телефона
$('#phone').mask('[phone]');

var form = document.getElementById('form'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
alert('Пожалуйста, заполните обязательные поля.'); // error message
}
}, false);

$("form").submit(function() {
$.ajax({
type: "POST",
url: "/form/mail.php",
data: $(this).serialize()
}).done(function() {
alert("Заявка принята! В ближайшее время наш менеджер с Вами свяжется.");
});
return false;
});
});

Answer 1

[Николай Чуприк]

У вас какой-то зоопарк, а не код. Видимо понадёргали из разных мест. Нижняя обработка отправки формы (которая на jQ написана), перекрывает верхнюю, поэтому письмо отправляется всегда.

Объедините всё в одну функцию:

$( "form" ).submit( function() {
  if ( !this.checkValidity() ) 
    alert( "Пожалуйста, заполните обязательные поля." );
  else  {
    $.ajax( {
      type: "POST",
      url: "/form/mail.php",
      data: $( this ).serialize()
    } ).done( function() {
      alert( "Заявка принята! В ближайшее время наш менеджер с Вами свяжется." );
    } );
} );

Comments

[Ольга]

$(document).ready(function() {

	// Добавляем маску для поля с номера телефона
    $('#phone').mask('[phone]');

$( "form" ).submit( function() {
  if ( !this.checkValidity() )
    alert('Пожалуйста, заполните обязательные поля.');
  else  {
    $.ajax( {
      type: "POST",
      url: "/form/mail.php",
      data: $( this ).serialize()
    } ).done( function() {
      alert( "Заявка принята! В ближайшее время наш менеджер с Вами свяжется." );
    });
});

Sublime ругается на { на 1, 6 и 17 строках...

[Николай Чуприк]

Ольга, ну скобки-то проверьте сами:

$( document ).ready( function() {

  // Добавляем маску для поля с номера телефона
  $('#phone').mask('[phone]');

  $( "form" ).submit( function() {
    if ( !this.checkValidity() )
      alert('Пожалуйста, заполните обязательные поля.');
    else  {
      $.ajax( {
        type: "POST",
        url: "/form/mail.php",
        data: $( this ).serialize()
      } ).done( function() {
        alert( "Заявка принята! В ближайшее время наш менеджер с Вами свяжется." );
      } );
    }
  } );
} );

[Ольга]

Николай Чуприк, сейчас проверила на сайте. Если не заполнять поля, перезагружается страница. И нужно заново спускаться до кнопки и открывать форму. Как можно не перезагружать страницу?

[Николай Чуприк]

Добавить return false в конце:

$( document ).ready( function() {

  // Добавляем маску для поля с номера телефона
  $('#phone').mask('[phone]');

  $( "form" ).submit( function() {
    if ( !this.checkValidity() )
      alert('Пожалуйста, заполните обязательные поля.');
    else  {
      $.ajax( {
        type: "POST",
        url: "/form/mail.php",
        data: $( this ).serialize()
      } ).done( function() {
        alert( "Заявка принята! В ближайшее время наш менеджер с Вами свяжется." );
      } );
    }
    return false;
  } );
} );

Страница не будет перезагружать ни в каком случае, ни в случае ошибки проверки, ни в случае успешной отправки письма. Думаю, вам это и надо.

[Ольга]

Николай Чуприк, да, получилось. спасибо за помощь!