Как поправить валидацию формы js?

Question

[Alexander]

Здравствуйте, подскажите пожалуйста как доработать валидацию формы правильно?
Есть одна бага, которая отправляет форму когда поля не вадидны
Проблема заключается в переменной isValid, которая в один момент становится true и если пользователь опять нажмет на кнопку отправить - то форма отправится, как я могу это пофиксить буду благодарен за помощь

const form = document.getElementById("telegramForm");
const fields = form.querySelectorAll("input");

const isUserName = /^[A-Za-z\d_]{5,32}$/;
const isEmail = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
const isPhone =
  /^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$/;

let isValid = false;

const validateField = (field) => {
  const error = field.parentNode.querySelector(".text-helper");

  switch (field.name) {
    case "telegram":
      if (!isUserName.test(field.value) && field.value !== "") {
        error.textContent = "Некорректный никнейм";
        isValid = false;
      } else if (field.value === "") {
        error.textContent = "Введите никнейм";
        isValid = false;
      } else {
        error.textContent = "";
        isValid = true;
      }
      break;

    case "email":
      if (!isEmail.test(field.value) && field.value !== "") {
        error.textContent = "Некорректный email";
        isValid = false;
      } else if (field.value === "") {
        error.textContent = "Введите email";
        isValid = false;
      } else {
        error.textContent = "";
        isValid = true;
      }
      break;
    case "phone":
      if (!isPhone.test(field.value) && field.value !== "") {
        error.textContent = "Некорректный номер";
        isValid = false;
      } else if (field.value === "") {
        error.textContent = "Введите номер";
        isValid = false;
      } else {
        error.textContent = "";
        isValid = true;
      }
      break;

    default:
      break;
  }
};

for (const field of fields) {
  field.addEventListener("input", () => {
    validateField(field);
  });
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  for (const field of fields) {
    const error = field.parentNode.querySelector(".text-helper");
    if (field.value === "") {
      error.textContent = "Обязательное поле";
      isValid = false;
    } else if (isValid) {
      console.log("valid");
    }
  }

Answer 1

[キム ファイブプラス]

Ну так логично что после прохождения одной из "проверок" переменная становится true.
Сделай 3 разных переменных.

let isValid = {
telegram: false,
email: false,
phone: false
};

Comments

[Alexander]

спасибо большое, работает отлично!