Как сделать ajax проверку поля перед отправкой формы?

Question

[Александр]

Хочу сделать функцию validateField, которая будет аяксом отсылать значение поля на сервер и получать ответ true или false

Как мне прикрутить эту функцию к событию отправки формы?

Хочется сделать эти функционалы независимыми друг от друга.

Comments

[Kovalsky]

"Как мне прикрутить эту функцию к событию отправки формы?" - очень неоднозначный вопрос. Что конкретно вы хотите услышать? Перед отправкой формы посылаете запрос, в зависимости от ответа либо делаете сабмит формы, либо нет

[v3shin]

Зачем? Валидируйте на фронте, после отправки - дополнительно на бэке.

[Александр]

v3shin, на беке надо проверить, занят ли такой логин

Answer 1

[WebEagle]

<input name="test1" class="js-validate" data-validate-name="validate1" />
<input name="test2" class="js-validate" data-validate-name="validate2" />

и подключить обработчик onchange

document.querySelectorAll('.js-validate').forEach(function(item) {
  item.addEventListener('onchange', function(event){
    // event.target - измененный элемент
    // event.target.value
    // event.target.getAttribete('data-validate-name') - какую валидацию вы хотите
    // тут вызывать Ajax запрос с требуемыми параметрами, когда придёт ответ
  });
});

Когда приходит отрицательный ответ, добавляйте класс ошибки, или атрибут. К примеру js-input-error. Если вернется true - удаляйте класс
Далее когда будет onSubmit формы, валидируйте чтобы не было элементов с этим классом или атрибутом

Comments

[Александр]

спасибо, так и сделал.
но думал, может есть более простое решение