Как сделать проверку полей перед отправкой формы?

Question

[ravlex]

Есть такая форма с обработчиком отправки заявки на почту. Подскажите пожалуйста, как сделать проверку полей на заполнение а поле почты соответственно на присутствие @ в адресе? Нужно по типу required только через jquery (в сафари required не работает).

document.getElementById('feedback-form').addEventListener('submit', function(evt) {
  var http = new XMLHttpRequest(),
    f = this;
  evt.preventDefault();
  http.open("POST", "http://ravtest1.site88.net/pro-stroy/contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&phone=" + f.phone.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      $('.msg-form').html("Спасибо за обращение! Мы свяжемся с Вами в ближайшее время.");
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value = '';
    }
  }
  http.onerror = function() {
    $('.msg-form').html("Извините, данные не были переданы");
  }
}, false);

<div class="msg-form"></div>
<form method="POST" id="feedback-form">
  <div class="box-input">
    <label for="name">Введите имя</label>
    <input type="text" name="nameFF" id="name">
  </div>
  <div class="box-input">
    <label for="email">Введите e-mail</label>
    <input type="email" name="contactFF" id="email">
  </div>
  <div class="box-input">
    <label for="phone">Введите контактный телефон</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <div class="box-input">
    <label for="vopr">Задайте вопрос</label>
    <input type="text" name="messageFF" id="vopr">
  </div>
  <div class="box-button">
    <button type="submit">Отправить</button>
  </div>
</form>

Comments

[ravlex]

required не подходит, нужна проверка в сафари.

Answer 1

[Дмитрий]

https://github.com/jzaefferer/jquery-validation