Как сделать, так, чтобы форма обратной связи отправлялась на почту, только после прохождения валидации?

Question

[Klim161]

Доброго времени суток! На сайте есть простая форма обратной связи, которая состоит из имени, телефона и чекбокса. Также в js файле прописана валидация формы, она работает. Через php mailer и ajax сделал, чтобы данные из формы отправлялись на почту. Проблема в том, что данные с формы отправляются, независимо от того пройдена валидация или нет. Как сделать, так, чтобы форма отправлялась, только после прохождения валидации. Как их увязать воедино? Буду благодарен за помощь.
HTML Форма:

<div class="callback-request-block__right">
			  <form name="callback-request" class="callback-request-form"  method="post" id="form1" >
                  <div class="callback-request-form__header">
                    <h5 class="callback-request-form__title">
                      Закажите бесплатный обратный звонок!<br class="u-hide-until-large">
                      Мастер перезвонит Вам в течение  15 минут.
                    </h5>
                  </div>
				  
                  <div class="callback-request-form__content">
                    <input class="form-control callback-request-form__control" type="text" data-validation="required" data-required-message="Укажите имя" name="name" placeholder="Ваше имя">
                    <input class="form-control callback-request-form__control" type="text" data-validation="required" data-required-message="Укажите телефон" name="phone" placeholder="Ваш телефон">

                    <div class="form-check callback-request-form__terms-check">
                      <input id="terms-check" data-validation="checked" data-checked-message="Необходимо принять условия" class="form-check__input" type="checkbox" name="terms">
                      <label class="form-check__label callback-request-form__terms-label" for="terms-check">
                        Нажимая на кнопку «Заказать звонок», я даю согласие на обработку персональных данных и принимаю
                        <a class="callback-request-form__terms-link" href="/">условия пользовательского соглашения.</a>
                      </label>
                    </div>

                    <input type="submit" class="button callback-request-form__button" value="Заказать звонок">
                  </div>
                </form>
              </div>
               </div>
          </div>
		  <script type="text/javascript" src="/js/jquery.min.js"></script>
             <script type="text/javascript" src="script.js"></script>

Javascript валидация формы:

$(document).ready(function () {
  var validationRules = {
    required: function required(input) {
      if (input.value == "") {
        return false;
      }

      return true;
    },
    checked: function checked(input) {
      if (!input.checked) {
        return false;
      }

      return true;
    }
  };

  function validateForm(formName) {
    var form = document.forms[formName];

    if (!form) {
      return;
    }

    var i = 0;
    var errorMessages = [];

    var _loop = function _loop() {
      var element = form.elements[i];
      var rules = element.dataset.validation;

      if (!rules) {
        return "continue";
      }

      rules.split(' ').forEach(function (rule) {
        if (!validationRules[rule](element)) {
          var errorMessage = element.dataset["".concat(rule, "Message")];
          errorMessages.push(errorMessage);
        }
      });
    };

    for (i = 0; i < form.elements.length; i++) {
      var _ret = _loop();

      if (_ret === "continue") continue;
    }

    if (errorMessages.length > 0) {
      alert(errorMessages.join('\n'));
      return false;
    }

    return true;
  }

  $('.callback-request-form').on('submit', function (e) {
    return validateForm($(this).attr('name')); 
    });
  });

Javascript AJAX:

$('#form1').trigger('reset');
$(function() {
  'use strict';
  $('#form1').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      url: 'send.php',
      type: 'POST',
      contentType: false,
      processData: false,
      data: new FormData(this),
      success: function(msg) {
        console.log(msg);
        if (msg == 'ok') {
          alert('Сообщение отправлено');
          $('#form1').trigger('reset'); // очистка формы
        } else {
          alert('Ошибка');
        }
      }
    });
  });
});

Comments

[WapSter]

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

Answer 1

[Stalker_RED]

Клиент может отредактировать скрипт в браузере и обойдя валидацию отправить в форме любые данные.
Валидацию или фильтрацию на стороне сервера нужно делать обязательно.

Answer 2

[anyshape]

А зачем вы 2 раза обрабатываете submit?
у вас
$('#form1').on('submit',...
после preventDefault сразу идет ajax запрос
поставьте перед ajax запросом вызов валидации и условие которое по true запустит ajax

Answer 3

[Никита Шинкевич]

Создайте какой нить там битрикс24, возьмите оттуда виджет формы обратной связи, встройте и будет счастье. Что на рабочий стол в приложение будет дзынькать, что приложение в смартфон. Я ради этого функционала юзаю ее ибо задолбался формы сам делать.