1 Тема від moneyohota

  • moneyohota
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 28.06.2021
  • Повідомлень: 2
    • Репутація: 0

Тема: Валідація для телефону. Завжди дає telephon.input дає null

Доброго дня. Я робив валидацію для номера телефону. Но завжди telephon.input дає null. На ім'я та email такого нема. Вони знаходять input, для ім'я name.input, для почти email.input. Тобто проблема у том що телефон, не знаходить telephone.input. Допоможіть будь-ласка.

HTML

<form class="form-contact"><form>

const arr_form = [
  ["text", "telephon", "Mobile"],
]

function inputForm(e) {
  let obj_str = "";
  for(let e of arr_form) {
    obj_str += `
      <div class="form-item">
        <input type="${e[0]}" class="form-item__input" name="${e[1]}" placeholder="${e[2]}">
        <span class="form-error_${e[1]}"></span>
      </div>
    `;
  }
  form.innerHTML += obj_str;
}

inputForm()

function formSub() {
  const text_and_sub = `
    <textarea class="form__textarea"  placeholder="Your Message"></textarea>
    <button class="form-submit" type="submit">SEND</button>
  `;
  form.innerHTML += text_and_sub;
}

formSub()

Валідація

const regExTelephon = /(\+)?(\d{2})? ?(\(?0\d{2}\)?) ?(\d{3}) ?(\d{2}) ?(\d{2})/g;

function check_value(input) {
  const regExObj = { 
    [input.name]: input.value,
    objname : input.name
  }

  if (input.value.trim()) {
    switch (input.name) {
      case "telephon":
        const telephon = input.value.match(regExTelephon)
          if(telephon[0] !== telephon.input) {
          regExObj.error = "Номер не корректен"
          return regExObj
        }
        break;
    }
      regExObj[input.name] = input.value
      return regExObj
  } else {
    regExObj.error = 'Поле должно быть заполнено'
    return regExObj
  }
}

Форма submit

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const input = document.querySelectorAll(".form-item__input");
  input.forEach((input) => {
    const result = check_value(input);
    if(result.error) {
      input.classList.add("_error")
      document.querySelector(`.form-error_${result.objname}`).innerHTML = result.error;
    } else {
      input.classList.remove("_error")
      document.querySelector(`.form-error_${result.objname}`).innerHTML = "";
    }
  });
});