Проверка на заполненное поле?

Question

[L1nw0od]

Доброго времени суток вот использую стандартный код при отправке формы aJax (Но есть проблемка, при отправке формы в полях стоит "required" - но код не реагирует на это никак и при клике всеравно отправляет форму! Как там исправить чтоб была проверка

<form action="" method="post" _lpchecked="1" id="form-contact" class="form-element wr" autocomplete="off">
            <input type="text" name="name" placeholder="Введите имя"required >
            <input type="text" name="sk_viber" placeholder="Введите телефон"  required>
           <input type="submit" class="form-input__button btn submit-btn btn-default" value="Отправить" onclick="SendPost1();" >
          </form>

function SendPost1() // Наша функция, которая будет осуществлять ajax-отправку
{
    jQuery.ajax({ // Начала конструкции для работы с Ajax через jQuery
        type: "GET", // Метод, которым получаем данные из формы
        url: "http://site-name/send.php", // Обработчик формы. 
        data: jQuery("#form-contact").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
        success: function (html) { // функция выполняемая при успешном отправлении данных
            jQuery(".wr").empty(); // очищаем тело документа
            jQuery(".wr").append("<h5 style='margin-top: 10px;'><center>Ваше сообщение успешно отправлено.</center></h5>"); // вставляем сообщение об успехе
        }
    });
}

Comments

[Александр]

Нужно слушать событие отправки и тогда обрабатывать, например, так

Answer 1

[coderisimo]

function SendPost1() { // Наша функция, которая будет осуществлять ajax-отправку
  
$("#form-contact input[required]").each(function(i, z) {  
  if (!$(z).val()) {
      alert("Э !А хто поля будет заполнять?!");
      return;
    }
  });

  jQuery.ajax({
    // Начала конструкции для работы с Ajax через jQuery
    type: "GET", // Метод, которым получаем данные из формы
    url: "http://site-name/send.php", // Обработчик формы.
    data: jQuery("#form-contact").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
    success: function(html) {
      // функция выполняемая при успешном отправлении данных
      jQuery(".wr").empty(); // очищаем тело документа
      jQuery(".wr").append(
        "<h5 style='margin-top: 10px;'><center>Ваше сообщение успешно отправлено.</center></h5>"
      ); // вставляем сообщение об успехе
    }
  });
}

Comments

[L1nw0od]

Не работает - сообщение высвечивается но при клике в окне alert ок оно не пропадает и нужно кликать ровно столько раз сколько осталось не заполненных полей после чего оно все-же форму отправляет

[coderisimo]

L1nw0od,
ну, сообщение это шутка, а в коде основаня идея. поправьте вот так

function SendPost1() { // Наша функция, которая будет осуществлять ajax-отправку
 
var validated =  true;  
$("#form-contact input[required]").each(function(i, z) {  
  if (!$(z).val()) {
    validated = false;
     return false;
    }
  });


if(!validated)
return;

  jQuery.ajax({
    // Начала конструкции для работы с Ajax через jQuery
    type: "GET", // Метод, которым получаем данные из формы
    url: "http://site-name/send.php", // Обработчик формы.
    data: jQuery("#form-contact").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
    success: function(html) {
      // функция выполняемая при успешном отправлении данных
      jQuery(".wr").empty(); // очищаем тело документа
      jQuery(".wr").append(
        "<h5 style='margin-top: 10px;'><center>Ваше сообщение успешно отправлено.</center></h5>"
      ); // вставляем сообщение об успехе
    }
  });
}

[L1nw0od]

Василий, спасибо

[coderisimo]

L1nw0od, удачи )