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

Question

[Тест Тестов]

Написал код валидации формы на стороне клиента, при 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 = "[phone]*";
            })
        }
    } else if (id.name === "date") {
        if (id.value.trim() === "") {
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
            })
        }
    }
};

Из-за e.preventDefault(); данные соответственно не отправяются, а если его убрать, то отправятся до валидации, что деать?

Answer 1

[ThunderCat]

1) Валидация на клиенте не отменяет обязательность проверки данных на бэкенде.
2) Флаг. После успешной проверки вы устанавливаете проверочную переменную в тру и делаете субмит форме, перед превентДефаулт проверяете эту переменную, и возвращаете тру из листенера если вы отправляете форму обычной отправкой с перезагрузкой, или вызываете функцию, которая отправляет все данные аяксом в случае аякс отправки соответственно.

Comments

[Тест Тестов]

Прошу прощения, я новичек, почти ничего не понял) Не могли бы вы кодом написать?

Форма отпрвляет пост запрос на сервер, который уже node обрабатывает на серверной части, поэтому никаких функций в фронт-энде нету

[ThunderCat]

Аким Саввин, что не понятно? Делаете переменную допустим let valid = false;, в евентлистенере ее первым делом проверяете. Если она фалс - то ничего не делаем, код идет дальше к превентДефаулт и проверке, если она тру (то есть проверка уже была и прошла успешно) - отправляем форму, прервав проверки до превент Дефаулт.

Немного изменил ответ, чтобы было понятнее...

[WbICHA]

Аким Саввин,

я новичек

Ты с жсом уже 2.5 года работаешь...

[ThunderCat]

Аким Саввин, WbICHA, да и код не сказать чтобы нубский...

[Тест Тестов]

ThunderCat, Мне кажется, что у меня код написан не под эту структуру проверки.
У меня функция engine сначала проверяет тип инпута, а потом уже его "валидирует", как мне в таком случае поучить данные об успешной проверки на каждый инпут и потом еще form.submit(); сделать?

[Тест Тестов]

WbICHA, Я бросал это дело)

[ThunderCat]

Аким Саввин,

как мне в таком случае поучить данные об успешной проверки на каждый инпут и потом еще form.submit(); сделать?

ну, функция проверки у вас какую-то переменную же создает? Хотя по уму должна просто возвращать код ошибки (ок или не ок, и если не ок, то что пошло не так), но это уже больше на ваше усмотрение и к заданному вопросу не относится.

В качестве совета - добавьте

function engine() { 
    let errorTrigger = false; 
...
//в проверках при ошибке выставляешь ее в тру
...
    return errorTrigger; // теперь можно программно понять были ли ошибки
}

(и что за название такое, нельзя хотя бы для себя адекватно называть функции?)

[Тест Тестов]

ThunderCat, Огромное спасибо за помощь! Все поучилось и я понял, какой я идиот))) Немного недопонимал принцип работы return в функциях, почитал немного документацию и оказалось, что return работает немного не так, как я думал. А ведь сначала я так и думал сделать через return, но не знал как он работает из-за этого не получилось)) Кому интересно, вот готовый код!

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) {
        var validated = inputValidate(elem);
    }

    if (!validated) {
        console.log("Validation error!");
    } else {
        console.log("Validation succes!");
        console.log("Form submited");
        form.submit();
    }
});

function inputValidate (id) {
    let validated  = true;

    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() === "") {
            validated = false
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
                id.placeholder = "Name*";
            })
        }
    } else if (id.name === "phone_number") {
        if (id.value.length != 20) {
            validated = false
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
                id.placeholder = "[phone]*";
            })
        }
    } else if (id.name === "date") {
        if (id.value.trim() === "") {
            validated = false
            errorInit(id);
            id.addEventListener("focus", () => {
                errorUnInit(id);
            })
        }
    }

    return validated
};