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

Question

[Nimbus1996]

Есть форма на сайте, делаю отправку данных на почту с помощью 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();
}
});

Answer 1

[Nimbus1996]

Решил проблему!
Оставил блокировку кнопки и добавил в функцию submit, которая выполняется если ошибок нет, form.submit()

const submit = () => {
form.submit();
}

Answer 2

[сергей захарченко]

кнопку не блокируй... а по нажатии на нее в конце функции напиши return false;

Comments

[Nimbus1996]

я думал об этом, но не могу найти как это написать, напиши кусок кода, пожалуйста.

[сергей захарченко]

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();
}
return false;
});

примерно так... но это пример на вскидку на коленке

[сергей захарченко]

лучше валидацию отдать на сторону html присваивая нужным инпутам нужные свойства... далее на кнопку повешать событие только если форма валидна используя псевдо класс :valid и на js проверять только то что не может проверить html и потом уже на сервере проверять все это повторно

[Nimbus1996]

сергей захарченко, всё работает как надо только если все полня правильно заполнены: выполняется submit, всплывает окно (это так, для наглядности) а затем выполняется отправка php, но если поля пустые или не правильно заполнены то сразу выполняется отправка и пофиг ей вообще, ничего ее не останавливает

[Nimbus1996]

сергей захарченко, вы про required?

[сергей захарченко]

да

[Nimbus1996]

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

[сергей захарченко]

там есть еще атриббут паттерн

[Nimbus1996]

сергей захарченко, ааааа вот оно что, т.е можно проверку на заполнено поле или нет заменить на required а маски на pattern и перенести это все в разметку? не могли бы вы набросать примерно код тогда для события кнопки

[сергей захарченко]

я так понял что jquery подключен так что примерно так

$(document).on('click', 'button', () => {
if($('form:valid').lenght > 0) {
// действия по отправке формы
} else {
return false;
}
});