Проверка на валидность полей формы последовательно по одному полю - javascript

//универсальная функция валидации полей ввода форм-popup
function checkInputValidity(input, error) {

  if (input[i].validity.valueMissing) {//если поле пустое
    error.textContent = "Это обязательное поле";
    error.classList.add('error_active');

  } else if (input.validity.tooShort || input.validity.tooLong) {
    //если количество символов не соответствует 2<х<30

    error.textContent = "Должно быть от 2 до 30 символов";
    error.classList.add('error_active');

  } else if (!input.validity.valid) {
    //если в поле вбита не ссылка

    error.textContent = "Здесь должна быть ссылка";
    error.classList.add('error_active');

  } else {//если ошибок нет, то поле валидно
    error.textContent = "";
  }
  return input.validity.valid;
}

//универсальная функция установления активности кнопке ввода submit форм
function setSubmitButtonState(check, buttonSubmit) {
  if (check) {
    buttonSubmit.removeAttribute('disabled');
    buttonSubmit.classList.add('popup__button_active');
  } else {
    buttonSubmit.setAttribute('disabled', true);
    buttonSubmit.classList.remove('popup__button_active');
  }
}

//универсальная функция добавления обработчиков всем полям формы.
function setEventListeners(popup, input, buttonSubmit, error) {
  popup.addEventListener('input', function() {
    // проверяем валидность обоих инпутов
    const check = checkInputValidity(input, error);
    // активируем/дезактивируем кнопку сабмита в зависимости от валидности инпутов
    setSubmitButtonState(check, buttonSubmit);
  });
}

// вызов функции, которая создаёт обработчики для всех форм
setEventListeners(popupProfileForm, inputProfileName, buttonSubmitPopupProfile, errorName);
setEventListeners(popupProfileForm, inputProfileAboutMe, buttonSubmitPopupProfile, errorAboutMe);

В форме 2 поля. Нужно проверять их на валидность последовательно, по мере заполнения. Представленный код работает, но проверка валидности идет одновременно по обоим полям. Как сделать последовательную проверку?


Ответы (0 шт):