Реализовать валидацию формы через js и отправку через phpMailer

Question

господа программисты. Возник значит у меня вопрос, как сделать валидацию на js при отправке через phpMailer. Html

    <!DOCTYPE html>
<html lang="en">
<form enctype="multipart/form-data" method="post" id="form" onsubmit="send(event, 'send.php')">
  <p>Имя</p>
  <input placeholder="Представьтесь" name="name" type="text" id="name-input">
  <div class="name-error" id="name-error">

  </div>
  <!-- /.name-error -->
  <p>Телефон</p>
  <input placeholder="Телефон" name="phone" type="text" id="phone-input">
  <div class="name-error" id="phone-error">

  </div>
  <!-- /.name-error -->
  <p>Email</p>
  <input placeholder="Укажите почту" name="email" type="text" id="email-input">
  <div class="name-error" id="email-error">

  </div>
  <!-- /.name-error -->
  <p>Сообщение</p>
  <textarea name="text"></textarea>
  <p>Прикрепить файлы</p>
  <input type="file" name="myfile[]" multiple id="myfile">
  <div class="send-btn">
  <input value="Отправить" type="submit">
  </div>
                        
</form>

Сама отправка формы реализуется вот таким скриптом:

     function send(event, php) {
                    console.log("Отправка запроса");
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                    var req = new XMLHttpRequest();
                    req.open('POST', php, true);
                    req.onload = function () {
                        if (req.status >= 200 && req.status < 400) {
                            json = JSON.parse(this.response); // Ебанный internet explorer 11
                            console.log(json);

                            // ЗДЕСЬ УКАЗЫВАЕМ ДЕЙСТВИЯ В СЛУЧАЕ УСПЕХА ИЛИ НЕУДАЧИ
                            if (json.result == "success") {
                                // Если сообщение отправлено
                                alert("Сообщение отправлено");
                            } else {
                                // Если произошла ошибка
                                alert("Ошибка. Сообщение не отправлено");
                            }
                            // Если не удалось связаться с php файлом
                        } else {
                            alert("Ошибка сервера. Номер: " + req.status);
                        }
                    };

                    // Если не удалось отправить запрос. Стоит блок на хостинге
                    req.onerror = function () {
                        alert("Ошибка отправки запроса");
                    };
                    req.send(new FormData(event.target));
                }

А вот как выглядит скрипт валидации:

                let emailInput = document.querySelector('#email-input');
            let phoneInput = document.querySelector('#phone-input');
            let nameInput = document.querySelector('#name-input');
            let checkBox = document.querySelector('#radio-agree');
            let emailError = document.querySelector('#email-error');
            let nameError = document.querySelector('#name-error');
            let phoneError = document.querySelector('#phone-error');

            let phoneBool = false;
            let emailBool = false;
            let nameBool = false;
            let politBool = false;

            let sendBtn = document.querySelector('.send-btn');


            // Валидация почты
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var address = emailInput.value;

            if (reg.test(address) == false) {
                if (address.length == 0) {
                    emailError.textContent = 'введите e–mail';
                } else {
                    emailError.textContent = 'некорректный e–mail';
                }
            } else {
                emailError.textContent = '';
                emailBool = true;
            }

            // Валидация имени
            let name = nameInput.value;
            if (name.length == 0) {
                nameError.textContent = 'введите имя';
            } else {
                nameBool = true;
                nameError.textContent = '';
            }

            // Валидация телефона

            let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
            let phone = phoneInput.value;

            if (regex.test(phone) == false) {
                if (phone.length == 0) {
                    phoneError.textContent = 'введите номер';
                } else {
                    phoneError.textContent = 'некорректный номер';
                }
            } else {
                phoneBool = true;
                phoneError.textContent = '';
            }

            // Валидация чекбокса
            if (checkBox.checked) {
                politBool = true;
            } else {
                console.log('Согласитесь с политикой');
            }

Теперь вопрос, как сделать так, чтобы у нас до отправки формы происходила валидация? Мне нужно, чтобы у нас сначала шла валидация, а потом отправлялась форма. До этого, если я помещаю код валидации внутрь функции отправления формы, страница перезагружается и все.

БЛОГ НА HUSL

Реализовать валидацию формы через js и отправку через phpMailer

Ответы (0 шт):