How to make ajax validate a field before submitting a form?

Question

AJAX

I want to make a validateField function that will send the field value to the server by Ajax and receive a true or false response

. How can I attach this function to the form submit event?

I would like to make these functionals independent of each other.

Answer 1

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

and connect the onchange handler

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

When a negative response comes in, add an error class or attribute. For example js-input-error. If it returns true - delete the class
Next, when there is onSubmit of the form, validate so that there are no elements with this class or attribute