axrising
@axrising

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

Здравствуйте, подскажите пожалуйста как доработать валидацию формы правильно?
Есть одна бага, которая отправляет форму когда поля не вадидны
Проблема заключается в переменной 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");
    }
  }
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
Ну так логично что после прохождения одной из "проверок" переменная становится true.
Сделай 3 разных переменных.
let isValid = {
telegram: false,
email: false,
phone: false
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 июн. 2021, в 12:35
20000 руб./за проект
22 июн. 2021, в 12:20
4000 руб./за проект
22 июн. 2021, в 12:20
800 руб./в час