@Akim41k
WEB-developer

Как отправлять запрос после валидации формы?

Написал код валидации формы на стороне клиента, при submit форма отправляет post запрос на сервер, который позже обрабатывается node.js.

Написал такой код
var inputs = document.querySelectorAll(".form__input");
var inputsID = [nameInput, nubmerInput, dateInput];
var form = document.querySelector(".feedback__form");

form.addEventListener("submit", (e) => {
    e.preventDefault();

    for(elem of inputsID) {
        engine(elem);
    }

    e.stopPropagation();
});

function engine (id) {

    let errorInit = (elem) => {
        elem.classList.add("form__input_error");
        elem.parentNode.classList.add("input-wrapper_error");
        if (elem.type != "date") {
            elem.placeholder = "Format error*";
        }
    }

    let errorUnInit = (elem) => {
        elem.classList.remove("form__input_error");
        elem.parentNode.classList.remove("input-wrapper_error");
    }

    if (id.name === "name") {
        if (id.value.trim() === "") {
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
                id.placeholder = "Name*";
            })
        }
    } else if (id.name === "phone_number") {
        if (id.value.length != 20) {
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
                id.placeholder = "+420 (000) 000-00-00*";
            })
        }
    } else if (id.name === "date") {
        if (id.value.trim() === "") {
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
            })
        }
    }
};


Из-за e.preventDefault(); данные соответственно не отправяются, а если его убрать, то отправятся до валидации, что деать?
  • Вопрос задан
  • 176 просмотров
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
1) Валидация на клиенте не отменяет обязательность проверки данных на бэкенде.
2) Флаг. После успешной проверки вы устанавливаете проверочную переменную в тру и делаете субмит форме, перед превентДефаулт проверяете эту переменную, и возвращаете тру из листенера если вы отправляете форму обычной отправкой с перезагрузкой, или вызываете функцию, которая отправляет все данные аяксом в случае аякс отправки соответственно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы