Показать сообщение отдельно
  #1 (permalink)  
Старый 08.04.2020, 13:37
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Валидация формы
Здравствуйте! Подскажите, пожалуйста, почему не работает скрипт?
Проверка поля имени работает, а проверка email нет. Скрипт не дает писать вообще никаких символов в инпуте.
function nameAndEmailCheck() {
    //Функия принимает в качестве параметров id и регулярное выражение
    function inputCheck(id, regex) {
      //Первым параметром является выбранный по id элемент
      let element = document.getElementById(id);
  
      if (element) {
        let lastValue = element.value; //Получение значения инпута
  
        if (!regex.test(lastValue)) {
          //Проверка соответтсвия значения инпута регулярному выражению
          lastValue = ''; //В случае несоответтсвия инпут очищается
        }
  
        setInterval(function () {
          //Функия проверки срабатывает через заданный интервал
          let value = element.value; //Присвоение переменной значения инпута
  
          if (value != lastValue) {
            //Сравнение текущего и последнего значения инпута
            if (regex.test(value)) {
              //В случае соответсвия значения инпута реугялрному выражению
              lastValue = value; //Предыдущее значение инпута принимает его текущее значение
            } else {
              element.value = lastValue; //В противном случае значение инпута становится равным последнему значению
            }
          }
        }, 10); //Интервал срабатывания функции
      }
    }
  
    ; //Проверка поля ввода имени в popup-design
  
    inputCheck('name-first', /^[а-яёА-яЁ\s]*$/); 
    inputCheck('name-second', /^[а-яёА-яЁ\s]*$/); 
    inputCheck('email-first', /^[A-z0-9_.-]{1,}@([A-z0-9_.-]{1,}).([A-z]{2,8})*$/); 
    inputCheck('email-second', /^[A-z0-9_.-]{1,}@([A-z0-9_.-]{1,}).([A-z]{2,8})*$/); 
  
  }
  
  nameAndEmailCheck();


<div class="input-blocks-wrap">
                      <div class="input-block">
                        <input class="name-first" id="name-first" type="text" name="name" placeholder="Ваше имя" required>
                      </div>
                      <div class="input-block">
                        <input class="phone-first" id="phone-first" type="text" name="phone" placeholder="Ваш телефон" required>
                      </div>
                      <div class="input-block">
                        <input class="email-first" id="email-first" type="email" name="email" placeholder="Ваша почта" required>
                      </div>
                      <button class="form__submit" type="submit" id="first-form__submit">Заказать консультацию</button>


<div class="input-blocks-wrap">
                        <div class="input-block">
                          <input class="name-second" id="name-second" type="text" name="name" placeholder="Ваше имя" required>
                        </div>
                        <div class="input-block">
                          <input class="phone-second" id="phone-second" type="text" name="phone" placeholder="Ваш телефон" required>
                        </div>
                        <div class="input-block">
                          <input class="email-second" id="email-second" type="email" name="email" placeholder="Ваша почта" required>
                        </div>
                        <button class="form__submit" type="submit" id="second-form__submit">Заказать консультацию</button>
Ответить с цитированием