Пример из жизни: валидация формы при помощи jQuery онлайн урок.


Рассмотрим пример валидации формы при помощи jQuery. Задача будет оставаться такой же, а именно: перед отправкой формы выполнить проверку заполнения всех полей.

Итак, для этого нам понадобятся следующие методы:
.parents() - чтобы найти объект "форма"
.find()- чтобы найти в нем поля ввода
.not() - чтобы отфильтровать результаты поиска

Преобразуем наш код. Один из его вариантов:



Что мы сделали:
  1. Убрали событие HTML onsubmit, вместо этого сделали обработку клика на
    кнопке input[type='submit']
  2. Добавили анонимную функцию обработки этого события .click( function(){ ... } )
  3. В теле функции, мы создаем переменную fields и присваиваем ей результат следующих действий:
    1. $(this) - обращаемся к текущему объекту.
      На данный момент им является кнопка input[type='submit'].
    2. .parents("form") - ищем всех родителей кнопки с селектором form.
    3. .find("input, textarea") - в них (в нашем случае форма на странице одна) ищем всех
      потомков формы по селекторам input и textarea.
    4. .not("[type='submit']") - отсеиваем из стека результатов нашу кнопку.
  4. Далее все как в аналогичной лекции с применением JS.

Как видим, с использованием jQuery код стал немного короче и читабельнее. При этом, обратите внимание на скорость выполнения такого скрипта. Этот пример не показательный, т.к. очень маленький, но, тем не менее, с использованием jQuery скрипт выполняется в среднем 8мс, а без него - 1мс.