Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Валидация формы (https://javascript.ru/forum/dom-window/79926-validaciya-formy.html)

DVV 08.04.2020 13:37

Валидация формы
 
Здравствуйте! Подскажите, пожалуйста, почему не работает скрипт?
Проверка поля имени работает, а проверка 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>

рони 08.04.2020 13:50

DVV,
а нельзя как-то без setInterval освоить js, для вашего случая есть события oninput и onchange.

DVV 08.04.2020 13:52

можно, наверное, просто я этим скриптом давно пользуюсь. но тут что-то накосячил с email

рони 08.04.2020 14:06

DVV,
http://javascript.ru/forum/misc/7990...tye-polya.html

voraa 08.04.2020 15:41

Надо ли делать такие проверки?
Тем более, если они не совсем правильные.
Как пройдет проверку Фамилия "Голицин-Трубецкой"?
Про e-mail я уж не говорю.
По стандарту допустимы адреса
disposable.style.email.with+symbol@example.com
" "@example.org
"john..doe"@example.org
mailhost!username@example.org

А по совсем новым стандартам и
медведь@с-балалайкой.рф
δοκιμή@παράδειγμα.δοκιμή
Pelé@example.com
買 買 @ 屋企. 香港

https://en.wikipedia.org/wiki/Email_address


Часовой пояс GMT +3, время: 10:10.