Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Новичок
6 уроков
(1 час 30 минут)
Курс
Bootstrap
Курс по практическому применению самых главных вещей в Bootstrap 3 - всё, что нужно знать, для запуска боевых проектов.

#4 — Валидация форм своими руками (пишем javascript).

Разбираем bootstrap tooltips, пишем понятный аккуратный javascript. В итоге получаем готовое решение для валидации форм на клиентской стороне.



Ссылка на github репозиторий: github.com/kovaldn/form

Делись:

Оставь комментарий!

6 thoughts on “#4 — Валидация форм своими руками (пишем javascript).

  1. Виталий:

    Дбрый день!
    Подскажите как заставить Валидацию работать в случае присутствия нескольких форм на одной странице?

    1. Alex Lavrik:

      в этом месте привязка к формам:
      setUpListeners: function () {
      $(‘form’).on(‘submit’, app.submitForm);
      $(‘form’).on(‘keydown’, ‘input’, app.removeError);
      }

      можно здесь прописать ID форм, которые нужно парсить:

      первая форма

      $(‘form#paymentForm’).on(‘submit’, app.submitForm);
      $(‘form#paymentForm’).on(‘keydown’, ‘input’, app.removeError);

      вторая форма:

      $(‘form#shipmentForm’).on(‘submit’, app.submitForm);

      $(‘form#shipmentForm’).on(‘keydown’, ‘input’, app.removeError);

      можно также создать массив с ID форм и обработать в цикле.

      1. Jim Hawkins:

        Лучше так:
        var $paymentForm = $(‘#paymentForm’);
        $paymentForm.on(‘submit’, app.submitForm);
        $paymentForm.on(‘keydown’, ‘input’, app.removeError);
        — меньше обращений к dom.

  2. Jim Hawkins:

    …еще из минусов:
    1. Не отслеживается потеря инпутом фокуса.
    2. Работает криво — попробуйте отправить пустую форму (все 3 поля — красные),
    потом введите что-нибудь в поле Имя, нажмите Отправить — тултипы пропали (все! — хм), но два поля — красные,
    введите телефон, нажмите Отправить — тултип у емэйла появился (норм.),
    теперь сотрите Имя, нажмите Отправить — тултип у имени появился, но пропал у емэйла (упс) и т/д

  3. Jim Hawkins:

    Оборачивайте jQuery скрипты не в
    (function() { … })();
    а так:
    $( document ).ready(function() { … });
    или так:
    $(function() { … });
    или так:
    function readyFn( jQuery ) { … });
    См. http://learn.jquery.com/using-jquery-core/document-ready/

  4. freekir:

    А зачем нужна 28 строка?

Добавить комментарий

Рекомендуемые курсы