@twwebrus

Как выводить уведомление о неправильном заполненномом поле?

Добрый вечер.
При отправки формы с неправильными данными не срабатывает условие. По идее, если написать в поле данные не по указанному формату, то должно выводить уведомление - "Ошибка ввода данных". Уведомления не происходит, но стиль "bg2" прописывается корректно (происходит подсветка красным цветом). Подскажите, где ошибся?

<form action="success.php" class="contact-form" method="post">
            <div class="contact-form__wrap bg-1">	
              <input type="text" class="tel" name="phone" placeholder="Ваш номер телефона" required>
              <button data-submit name="send" class="btn">Подать заявку</button>
            </div>
            <label class="checkobx-wrap d-flex">
              <input type="checkbox" name="check" class="checkbox" required>
              <span class="checkbox-custom"></span> 
              <span class="label">
                Согласен на обработку персональных данных <span>и соглашаюсь c политикой конфиденциальности</span>
              </span>
            </label>
          </form>


$('form').submit(function(e) {
    e.preventDefault();
    var err = false;
    var form = $(this);
    var phone = form.find('.tel').val();
    var reg = /^((\+?7|8)[ \-]?)?((\(\d{3}\))|(\d{3}))?([ \-])?(\d{3}[\- ]?\d{2}[\- ]?\d{2})$/;
    if(phone.length < 1) err = 'Это обязательное поле';
    else if(!(reg.test(phone))) err = 'Ошибка ввода данных';
    if(err) {
      form.find('.input-error').html(err);
      form.find('.tel').css('box-shadow', 'inset 0 0 0 1px #fd9595');
      form.find('.contact-form__wrap').removeClass('bg-1').addClass('bg-2');
      return false;
    }else {
      form.css('opacity', 0);
      var load = form.parent('.questions__wrap').children('.loader');
      var success = form.parent('.questions__wrap').children('.success');
      load.css('opacity', 1);
      $.ajax({
         type: 'POST',
                 url: form.attr('action'),
                 data: form.serialize(),
         success: function(){
            setTimeout(function() {
            	form.find('.tel').css('box-shadow', 'inset 0 0 0 1px #b0afaf');
                        load.css("opacity", 0);
                        success.animate({opacity: 1}, 200);
                        setTimeout(function() {
                          success.css('opacity', 0);
                          form.get(0).reset();
              	form.animate({opacity: 1}, 600);
              	form.find('.contact-form__wrap').removeClass('bg-2').addClass('bg-1');
                    	}, 4000);
                    }, 1500); 
        }
      });
    }
  });
  • Вопрос задан
  • 315 просмотров
Решения вопроса 1
@eyeless_watcher
form.find('.input-error').html(err);

В HTML-разметке отсутствует элемент с классом `input-error`, текст ошибки никуда не выводится.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы