Как убрать ошибки, которые нашел валидатор при вводе текста в input?

Question

[Araya]

Всем привет.
Знаю, что есть кучи плагинов, но нужно понять самому как все это дело работает.
Задача: при вводе текста в форму, нужно убрать ошибку, которую нашел валидатор.
Например:

И когда пользователь начинает исправлять, бордер и ошибка сами выключаются.
Есть у кого идеи?

Comments

[Дмитрий]

Добрый вечер.
Картинка прекрасна, глаза отвести не возможно!!!
А что там с кодом?

[Araya]

slo_nik, Спасибо, я старался :)

if (tel_field.match(/^((\+7|7|8)+([0-9]){10})$/)) {
            cancel($('.tel-form'), $('.tel_message'));
            var validTel = true;
        } else {
            $('.tel-form').css('border-bottom', '2px solid red');
            $('.tel_message').html('<span>Введите в формате - [phone]</span>').addClass('error');
        }

Примерно так я его нарисовал

Answer 1

[Катя Смирнова]

Отслеживать изменения input через onChange. Если ошибки есть, выводить их в блок ошибок.

Answer 2

[Николай Чуприк]

Вот терпеть не могу, когда требуют ввод телефона в определённом формате. Почему форма грузит меня своими проблемами. Сообщать об ошибке имеет смысл если сам номер невалидный, а не его формат. Вот моя простая форматилка российских номеров:

<input
  onblur = "
    const rePhone = /^[78\(\)\s\+\.-]*(\d{3})[\(\)\.\s-]*(\d{3})[\s\.-]*(\d{2})[\s\.-]*(\d{2})$/;
    const strPhoneFormat = '($1) $2-$3-$4';
    if ( this.value.search( rePhone ) === -1 )
      this.className = 'error';
    else	{
      this.value = this.value.replace( rePhone, strPhoneFormat );
      this.className = 'ok';
    }"
  onfocus = "this.className = ''"
>

Если вам нравится другой формат номера, думаю, исправите без проблем.

Попробовать здесь: jsfiddle.net/q2uf7njy

Comments

[Araya]

Это я впервые формой занимался, игрался с регулярками :) Ваш вариант, конечно же, более интересный. Возьму на заметку. Спасибо!)