Формы, часть 6, "Проверка данных формы на jQuery Validate"

« Предыдущая запись
 
  Следующая запись »
 

В третьей статье цикла про формы - "ВСЁ, что нужно для валидации форм на jQuery", я писал про плагин "jQuery validation", который позволял без перезагрузки страницы (привет технологии AJAX - прим.ред.) проверять форму на правильность введённых данных. Эта статья является её прямым продолжением, в котором я хочу сказать то, что не говорил ранее, и при этом исправить некоторые ошибки.

 

Обновлённый пример для последней версии jQuery

Прежде всего предлагаю пример из предыдущей статьи, но с обновлёнными jQuery и jQuery validation plugin (версии 1.4.2 и 1.7.1 соответственно). Также вы можете скачать плагины на странице загрузок - ссылка.

 

 

В принципе он ничем не отличается от того примера, кроме изменённой строки добавления ошибки к нужному элементу: участок label[@for=' заменён на label[for='.

Сохранение формы и обновление данных без перезагрузки страницы

Для этого предназначен плагин jQuery Form. Сочетается с jQuery Validation превосходно, поэтому зачастую один сопутствует другому. Предлагаю уже знакомый пример (правда с отключённой проверкой всех полей, кроме имени), где данные формы передаются самой же странице.

Прежде всего добавим перед кодом формы поля следующие строки:

<div id="output">
  <?
  if (isset($_REQUEST['name'])) {
    echo $_REQUEST['name']);
  }
  else echo "Этот текст будет заменён AJAX-ответом от сервера.";
  ?>
  <br>
</div>

Всё понятно. Если есть переданные данные от поля с именем name, то выведем это имя, а если нет, то выведем просто информационную строку.

Теперь добавим перед вызовом функции валидации строки с настройками плагина jQuery Form.

var options = {
  target: "body",
  timeout: 10000/*,
  success: function() {
      alert('Thanks for your comment!');
  } */
};

Обращаю внимание на поле target, которое принимает имя селектора, куда будет помещён ответ от сервера. Если параметр action в форме ссылается на другую страницу, то здесь нужно указать какой-нибудь идентификатор (в нашем примере подошёл бы #output). Тогда output будет иметь вид:

<div id="output">
   Этот текст будет заменён AJAX-ответом от сервера.
</div>

Иными словами, полученная информация из файла, указанного в action, запишется в этот блок, а старая информация будет стёрта.

В случае, если action ссылается на эту же страницу (или action не указан вовсе), то стоит указать тег body (в противном случае в указанное место будет выведена эта же страница). Конечно, конструкция не очень хорошая, так как по идее идёт как бы перезагрузка страницы. Но для примера это не страшно.

Также в случае удачного запроса (опция success) можно выполнить какую-нибудь функцию. Я этого не делаю, опция закомменчена, но если надо, всегда можно раскомментить.

Теперь нужно задать, чтобы при отправке формы происходил AJAX-запрос. Для этого уже в теле вызова плагина jQuery Validate в самом начале пропишем:

submitHandler: function(form) {
   $(form).ajaxSubmit(options);
},

Понятное дело, что options - это те настройки, которые мы прописали выше. Хотя их можно и здесь указать, по желанию.

Все опции, которые можно указать, можно прочитать на официальном сайте плагина - ссылка.

 

 

 

Additional methods для jQuery Validate

К плагину jQuery Validation существует дополнение additional methods. Оно расширяет количество методов проверки полей форм. Скачать можно по ссылке. Итак, что же они предлагают:

  1. maxWords, minWords, rangeWords. Аналогично minlength, maxlength и rangelength, но только применительно не к буквам, а к словам.
  2. letterswithbasicpunc. Разрешает ввод только букв или пунктуации. По умолчанию, там только английские буквы. Но ничего нам не мешает добавить и русские (при желании.
  3. alphanumeric. Буквы, цифры, пробелы и подчёркивания.
  4. lettersonly. Только буквы.
  5. nowhitespace. Никаких пробелов.
  6. integer. Целове положительное или отрицательно число
  7. ziprange, vinUS, phoneUS, phoneUK, mobileUK. Актуально только для зарубежных коллег. Почтовый код, ВИН и телефон для США, телефон и моб.телефон для Великобритании.
  8. dateITA и dateNL. Проверка корректности даты. dateITA пропускает значения 11/12/3000, 1/2/1211.Также пропустит 29/2/2008, но при этом 29/2/2009 не пропустит, так как в 2009 в феврале было 28 дней. dateNL пропускает все представленные выше значения, зато позволяет задавать точки как разделители 1.2.1211. Может эти два метода ещё что умеют, подробнее не вдавался =)
  9. time. Указание времени между 00:00 и 23:59.
  10. email2 и url2. Расширенные методы для почты и урла, отличием которых является поддержка TLD - домена верхнего уровня (top-level domain).
  11. creditcardtypes. Типы кредиток.
  12. strippedminlength. Так и не понял, для чего это

Вроде бы ничего не пропустил. Файл, понятное дело, можно дополнять своими методами, что есть очень хорошо. Включайте фантазию! Советую также почитать ветку комментов на сайте плагина (ссылка), там можно подчерпнуть интересную информацию.

На сегодня всё! Удачных всем праздников, и не забудьте поздравить ваших дедушек и бабушек!

 

Ссылки по теме

, , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 7 на запись

"Формы, часть 6, "Проверка данных формы на jQuery Validate""

  1. О. спасиб! С удовольствием прочту на выходных.

  2. пожалуйста! =)

  3. Great information! I’ve been looking for something like this for a while now. Thanks!

  4. You’re welcome! Don’t forget to subscribe for a feed! =)

  5. Это оно! Будем разбираться… Спасибо!

  6. Пожалуйста!

  7. Уважаемый Александр, сайто строением начал заниматься совсем ни давно, поэтому знания очень минимальны.. при подключении данного плагина столкнулся с рядом вопросов. если есть возможность помочь с решением на конкретном примере, прошу ответить на Email

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии