@Nimbus1996

Сделать отправку формы на сервер после успешной проверки input?

Есть форма на сайте, делаю отправку данных на почту с помощью PHP mailer т.к. не знаю ajax от слова "совсем"), но проблема в том, что сделал валидацию формы которая отключает submit с помощью e.preventDefaut в результате чего форма не отправляется, потому что submit отключен, если уберу e.preventDefault, то форма будет отправляться но соответственно даже если поля пустые или не правильно заполнены.
Вопрос: Как я могу их объединить, чтобы action="mail.php" и POST вызывались только в том случае, если ошибок нет в форме.
ссылка на сайт: alexandersh-dev.h1n.ru

валидация:

const form = document.querySelector("form");
const regExpName = /^[а-яёА-яЁ_-]/;
const regExpEmail = /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm;
let isName = false;
let isEmail = false;
let isMessage = false;
let isSubmit = false;

const submit = () => {
alert("All right!");
form.reset();
}

const validateElem = (elem) => {
if (elem.id === "name") {
if (!regExpName.test(elem.value) && elem.value !== "") {
elem.parentNode.nextElementSibling.textContent = "Введите корректное имя";
isName = false;
}
else {
elem.parentNode.nextElementSibling.textContent = "";
isName = true;
}

if (elem.value == "") {
elem.parentNode.nextElementSibling.textContent = "Введите Ваше имя";
isName = false;
}
}
if (elem.id === "email") {
if (!regExpEmail.test(elem.value) && elem.value !== "") {
elem.parentNode.nextElementSibling.textContent = "Введите корректный E-mail";
isEmail = false;
} else {
elem.parentNode.nextElementSibling.textContent = "";
isEmail = true;
}

if (elem.value == "") {
elem.parentNode.nextElementSibling.textContent = "Введите Ваш e-mail";
isEmail = false;
}
}
if (elem.id === "text") {
if (elem.value == "") {
elem.parentNode.nextElementSibling.textContent = "Ваше сообщение пустое";
isMessage = false;
} else {
elem.parentNode.nextElementSibling.textContent = "";
isMessage = true;
}
}
}
for (let elem of form.elements) {
if (elem.tagName != "BUTTON") {
elem.addEventListener('blur', () => {
validateElem(elem);
});
}
}
form.addEventListener("submit", (even) => {
even.preventDefault();
for (let elem of form.elements) {
if (elem.tagName !== "BUTTON") {
if (elem.value == "") {
$('.contacts__error-message').text('Поле не заполнено!');
isSubmit = false;
} else {
elem.parentNode.nextElementSibling.textContent = "";
isSubmit = true;
}
}
}
if (isSubmit && isName && isEmail && isMessage) {
submit();
}
});
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
@Nimbus1996 Автор вопроса
Решил проблему!
Оставил блокировку кнопки и добавил в функцию submit, которая выполняется если ошибок нет, form.submit()

const submit = () => {
form.submit();
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
кнопку не блокируй... а по нажатии на нее в конце функции напиши return false;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
08 мар. 2021, в 10:02
75000 руб./за проект
08 мар. 2021, в 10:00
700 руб./за проект
08 мар. 2021, в 08:37
3000 руб./за проект