Статьи

jQuery валідація форм і полів в реальному часі

  1. Що ми сьогодні дізнаємося?
  2. Як ми реалізуємо jquery валідацію?
  3. Що ж ми будемо робити?
  4. структура проекту
  5. пишемо HTML
  6. Крок 1 - створюємо простий HTML код
  7. Крок 2 - створюємо форму, розділену на три частини
  8. Крок 3 - додаємо поля і кнопку підтвердити
  9. додаємо CSS
  10. Пишемо jQuery валідацію форми
  11. плануємо
  12. Що нам для цього потрібно?
  13. починаємо роботу
  14. Валідація поля імені користувача
  15. Валідація поля дати народження
  16. Валідація поля стати
  17. Валідація checkers - володіння транспортом
  18. Валідація поля Email
  19. Валідація поля інформації про користувача
  20. Пишемо метод sendIt
  21. Управляємо дією submit
  22. Готовий продукт
  23. после слів

Валідація полів з клієнтської сторони - це те що повинна мати кожна форма, в цьому немає сумнівів. По-перше, користувачеві не потрібно чекати, витрачати свої нерви. По-друге, ви показуєте, що турбуєтеся за своїх відвідувачів. Відвідувачу дуже приємно знати заздалегідь, що він зробив не так.

У цьому уроці, ми дізнаємося, як написати jquery валідацію форм в режимі реального часу. Якщо ви хочете побачити, що у вас вийде, ви можете натиснути «ДЕМО» і подивитися.

Що ми сьогодні дізнаємося?

  1. Як ми реалізуємо jquery валідацію?
  2. структура проекту
  3. пишемо HTML
  4. додаємо CSS
  5. Пишемо jQuery валідацію форми
  6. Готовий продукт
  7. після слів

Як ми реалізуємо jquery валідацію?

Існує безліч способів досягти цього, ось найпоширеніші з них:

  1. Ми можемо створити SPAN тег (в якому буде міститися інформація про валідації), поряд з полем вводу, і дати йому певний ID, через якого ми до нього звернемося.
  2. Ми можемо обгорнути кожне поле в P тег, всередині якого створити SPAN, який буде містити інформацію про валідацію поля.
  3. Також можна обгорнути поле P тегом, всередині якого «прищепити» SPAN (на льоту за допомогою jquery).

Це все буде працювати, але це не найкращий шлях реалізації. Чому? Тому, що занадто багато зайвого HTML коду в формі введення, який нам не потрібен. Має бути дотримана семантику коду .

Ми зробимо це так, як я зробив для себе. На мій погляд, це найбільш правильне рішення, хоча ніхто так не робить. Чесно кажучи, я нікого не бачив, хто б ще так робив ... якщо знаєте, напишіть мені в коментарі в кінці уроку.

Що ж ми будемо робити?

  1. Ми напишемо просту форму, красиву і з чистим семантичним кодом, без зайвих тегів.
  2. Так як люди заповнюють кожне поле окремо, ми можемо відстежити і затверджувати його на льоту:
    • Визначити його позицію у вікні (верхній лівий кут)
    • Визначити його ширину
    • Так ми будемо знати, де знаходиться його закінчення.
    • Додамо інформацію про валідацію в DIV блоці з певним ID, праворуч від конкретного поля. Також дамо відповідні класи .correct або .incorrect.

Зауважте: це також прийнятно для людей не використовують JavaScript у своєму браузері. Такі будуть валідацію на стороні сервера.

структура проекту

Нам потрібно буде створити три файли:

  1. index.html
  2. style.css
  3. validate.js

Ми розглянемо всі поетапно ... спочатку HTML код, потім необхідні CSS стилі, пізніше ми сфокусуємось на основному - jQuery скрипті валідації форми.

пишемо HTML

Розкладемо все по поличках ...

Крок 1 - створюємо простий HTML код

Для початку, створіть файл index.html і вставте в нього цей базовий код. Ви бачите, що підключаємо jQuery файл внизу, перед validation.js, який містить наш скрипт валідації.

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <title> Real-Time Form Validation Using jQuery </ title> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <link rel =" stylesheet "href =" style.css "type =" text / css "media =" screen "/> </ head> <body> <div id =" content "> </ div> <! - content -> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset = "utf-8"> </ script> <script type = "text / javascript" src = "validate.js" charset = "utf-8"> </ script> </ body> </ html>

Крок 2 - створюємо форму, розділену на три частини

Ми створимо форму, що складається з трьох частин, щоб побачити як проводити валідацію різних полів введення і чокерів. Для поділу ми використовуємо FIELDSET і LABEL, для заголовків кожного розділу:

  1. Персональна інформація (ім'я користувача, день народження, стать, транспортний засіб).
  2. Email (поле введення email користувача).
  3. Про себе (коротка інформація про користувача).
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <title> Real-Time Form Validation Using jQuery </ title> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <link rel =" stylesheet "href =" style.css "type =" text / css "media =" screen "/> </ head> <body> <div id =" content "> <form id = "jform" action = "http://1stwebdesigner.com" method = "post"> <fieldset> <legend> Personal Info </ legend> </ fieldset> <fieldset> <legend> Email </ legend > </ fieldset> <fieldset> <legend> About You </ legend> </ fieldset> </ form> </ div> <! - content ->

Крок 3 - додаємо поля і кнопку підтвердити

Дуже добре, тепер створимо кілька полів введення для нашої форми. Для нашого уроку, ми спеціально відібрали кілька різних полів:

  • Три поля INPUT (ім'я користувача, дата народження, email адреса).
  • RADIO кнопки, для вибору статі.
  • CHECKBOX для транспортних засобів користувача.
  • TEXTAREA для інформації про користувача.
  • BUTTON для кнопки «Підтвердити».

Ми будемо обгортати кожен LABLE і поле введення в тег P, щоб розділити на окремі блоки. Тепер ваш фінальний файл index.html буде виглядати наступним чином:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <title> Real-Time Form Validation Using jQuery </ title> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <link rel =" stylesheet "href =" style.css "type =" text / css "media =" screen "/> </ head> <body> <div id =" content "> <form id = "jform" action = "http://1stwebdesigner.com" method = "post"> <fieldset> <legend> Personal Info </ legend> <p> <label for = "fullname" class = "block "> Full name: </ label> <input type =" text "name =" fullname "id =" fullname "/> </ p> <p> <label for =" birthday "class =" block "> Day of birth <small> (dd-mm-yyyy) </ small>: </ label> <input type = "text" name = "birthday" id = "birthday" /> </ p> <p> <label class = "block"> I am: </ label> <input type = "radio" name = "gender" id = "man" value = "man" /> <label for = "man"> Man </ label> <input type = "radio" name = "gender" id = "woman" value = "woman" /> <label for = "woman"> Woman </ label> </ p> <p> <labe l class = "block"> I own: </ label> <input type = "checkbox" name = "vehicle" id = "car" /> <label for = "car"> car </ label> <input type = "checkbox" name = "vehicle" id = "airplane" /> <label for = "airplane"> airplane </ label> <input type = "checkbox" name = "vehicle" id = "bicycle" /> <label for = "bicycle"> bicycle </ label> <input type = "checkbox" name = "vehicle" id = "ship" /> <label for = "ship"> ship </ label> </ p> </ fieldset> <fieldset> <legend> Email </ legend> <p> <label for = "email" class = "block"> Email <small> ([email protected]) </ small>: </ label> <input type = "text" name = "email" id = "email" /> </ p> </ fieldset> <fieldset> <legend> About You </ legend> <p> <label for = "about" class = "block "> Tell us a little bit about yourself: </ label> <textarea id =" about "cols =" 50 "rows =" 10 "> </ textarea> </ p> </ fieldset> <p> <button type = "submit" id = "send"> submit </ button> </ p> </ form> </ div> <! - content -> <script type = "text / javascript" src = "http: / /ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "charset =" utf-8 "> </ script> <script type =" text / ja vascript "src =" validate.js "charset =" utf-8 "> </ script> </ body> </ html>

Це може виглядати трохи страшнувато, але це тому що багато полів введення в нашій формі. Насправді, тут немає нічого складного. Збережіть ваш файл, і подивіться в браузері, що вийшло. Тепер трохи прикрасимо ...

додаємо CSS

Так як CSS стилізовані не головна тема сьогоднішнього уроку, ми не будемо на цьому зупинятися. Просто нам необхідний цей CSS код, щоб форма виглядала красиво і все блоки були на своїх місцях.

Створіть файл style.css, вставте в нього код нижче. Тепер форма з майбутньою jquery валідацією, виглядає приголомшливо. Чи не так?

body {background: #efefef; margin: 0; padding: 0; border: none; text-align: center; font: normal 13px Georgia, "Times New Roman", Times, serif; color: # 222; } #Content {width: 500px; margin: 0 auto; margin-bottom: 25px; padding: 0; text-align: left; } Fieldset {margin-top: 25px; padding: 15px; border: 1px solid # d1d1d1; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } Fieldset legend {font: normal 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; letter-spacing: -1px; color: # 273953; } Input, textarea {padding: 3px; } Label {cursor: pointer; } .Block {display: block; } Small {letter-spacing: 1px; font-size: 11px; font-style: italic; color: # 9e9e9e; } .Info {text-align: left; padding: 5px; font-size: 11px; color: #fff; position: absolute; display: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px # a9a9a9; -moz-box-shadow: -1px 1px 2px # a9a9a9; box-shadow: -1px 1px 2px # a9a9a9; } .Error {background: # f60000; border: 3px solid # d50000; } .Correct {background: # 56d800; border: 3px solid # 008000; } .Wrong {font-weight: bold; color: # e90000; } .Normal {font-weight: normal; color: # 222; } #Send {background: # 3f5a81; width: 100%; border: 5px solid # 0F1620; font: bold 30px Verdana, sans-serif; color: #fafafa; text-shadow: 1px 1px 1px # 0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } #Send: hover {background: # 4d76b1; border: 5px solid # 253750; color: #fff; } #Send: active {text-indent: -10px; }

Пишемо jQuery валідацію форми

Це найбільш цікава і захоплююча частина уроку. Але для початку, нам необхідно подумати і описати основні моменти нашої роботи. Потрібно все спланувати.

плануємо

Перед тим як будемо писати, задайте собі три питання:

  1. Що нам потрібно від цього скрипта?
  2. Як ми хочемо це зробити?
  3. Як ми цього доб'ємося?

Це зрозуміло, ми хочемо, щоб скрипт проводив валідацію форми. Але як? Ми хочемо, щоб він робив це в режимі реального часу (коли користувач завершить заповнення поля введення) і при натисканні на кнопку «Підтвердити». Тому нам доведеться написати кілька функцій: окремо для кожного поля введення і для всіх форм (яка зголоситься при натисканні кнопки «Підтвердити»).

Щоб запобігти повторенню коду, нам потрібно буде створити JavaScript об'єкт для цього.

Що нам для цього потрібно?

JS об'єкт в нашому випадку буде називатися jVal, він буде містити наступні методи:

  • jVal.fullName
  • jVal.birthDate
  • jVal.gender
  • jVal.vehicle
  • jVal.email
  • jVal.about

Змінна, яка буде містити статус поточної помилки - jVal.errors. І метод, який перевіряє, чи існують якісь помилки і підтверджує відправку форми або відхиляє. Якщо знайшлися якісь помилки, направляє користувача в початок форми, де він може заповнити всі поля коректно.

Метод називається - jVal.sendIt

Тепер, ми можемо приступити до розробки jQuery скрипта валідації форм. Коли ми напишемо перший метод, далі все піде простіше і швидше.

починаємо роботу

Основа коду проста, абсолютно весь jquery код буде міститися всередині цього синтаксису:

$ (Document) .ready (function () {jVal = {};});

Валідація поля імені користувача

Наш перший метод буде обробляти поле «ім'я користувача». Вставте його всередину jVal об'єкта, як показано на прикладі:

var jVal = { 'fullName': function () {}};

Тепер напишемо кілька рядків коду всередині методу. Просто вставте їх, далі ми розглянемо що це означає:

$ ( 'Body'). Append ( '<div id = "nameInfo" class = "info"> </ div>'); var nameInfo = $ ( '# nameInfo'); var ele = $ ( '# fullname'); var pos = ele.offset ();

Лінія 1: Ми додаємо DIV блок в документ. Class info, додає якийсь стиль для блоку, який визначений в файлі style.css, також робить його невидимим за допомогою display: none; Нащет ID, це для того, щоб мати швидкий доступ до цього блоку і маніпулювати ним за допомогою jQuery. Цей DIV блок буде містити інформацію про валідацію поля.

Лінія 3: Пишемо звернення до цього блоку в змінну, так як ми будемо використовувати його велику кількість разів.

Лінія 4: Так само як і в попередньому випадку, ми записуємо підключення до поля fullname в змінну. Ми також будемо використовувати його багато разів.

jQuery функція offset () повертає поточну позицію елемента по відношенню до документа. Повертається у вигляді об'єкта, який містить властивості top і left. Ми використовуємо цю функцію для ele, щоб визначити позицію поля введення.

Тепер допишемо ще кілька рядків ...

nameInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15});

Як бачите, ми починаємо оперувати зі стилями блоку nameInfo. Конкретно, ми встановлюємо його позицію праворуч від поля введення. Для цього, ми підіймаємо на 3 пікселі вгору (2 рядок коду), і рухаємо на 15 пікселів праворуч від поля (3 рядок коду).

Ми написали 50% першого методу, доведемо справу до кінця. Настав час визначити, наскільки коректно користувач ввів дані і вжити заходів ...

if (ele.val (). length <6) {jVal.errors = true; nameInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← at least 6 characters'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {nameInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }

Виглядає не дуже? Боятися нема чого ...

Лінія 1: Перевіряємо, щоб ім'я введене користувачем не було менш 6 символів.

Лінія 2: Встановлюємо змінну jVal.errors на true, так як ми визначили, що ім'я користувача занадто короткий. Ми будемо використовувати це далі.

Лінія 3: Ми починаємо оперувати нашим nameInfo елементом (в якому виводимо інформацію). Для початку ми видаляємо class correct, і присвоюємо class error. Далі ми вставляємо контент в nameInfo елемент, це інформація про те, що ім'я має бути довшим 6 символів. І нарешті те, ми робимо видимим наше повідомлення для користувача.

Лінія 4: Ми починаємо оперувати нашим ele елементом (форма введення імені користувача). Видаляємо клас normal і присвоюємо wrong.

Лінія 5: Якщо ім'я користувача досить довге, тоді ...

Лінія 6: Ми починаємо оперувати nameInfo елементом. Якщо присвоєно клас error, видаляємо його і присвоюємо клас correct. Вставляємо всередину «пташку», щоб зрозуміти що все ОК. І показуємо повідомлення для користувача.

Лінія 7: Оперуємо ele елементом. Видаляємо клас wrong, якщо він застосований, і застосовуємо клас normal.

Ми створили наш перший метод валідації! Прийшов час протестувати його. Ми повинні бути впевнені, що наш метод зголоситься, коли користувач закінчить вводити своє ім'я. Для реалізації цього, нам необхідно причепити подія до дії. Ми будемо використовувати функцію change (). Вставте приклад коду нижче, під jVal об'єктом:

$ ( '# Fullname'). Change (jVal.fullName);

Що це означає на людській мові: якщо користувач змінює значення поля «Full name» а потім закінчує з цим, викликається метод fullName, який проводить валідацію поля.

Тепер ваш файл validate.js повинен містити наступний код:

$ (Document) .ready (function () {var jVal = { 'fullName': function () {$ ( 'body'). Append ( '<div id = "nameInfo" class = "info"> </ div> '); var nameInfo = $ (' # nameInfo '); var ele = $ (' # fullname '); var pos = ele.offset (); nameInfo.css ({top: pos.top-3, left: pos .left + ele.width () + 15}); if (ele.val (). length <6) {jVal.errors = true; nameInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← at least 6 characters'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong');} else {nameInfo.removeClass ( 'error'). addClass ( 'correct'). html ( '√'). show (); ele.removeClass ( 'wrong'). addClass ( 'normal');}}}; // bind jVal.fullName function to "Full name" form field $ ( '# fullname') .change (jVal.fullName);});

Валідація поля дати народження

Тепер все піде швидше. Нам просто потрібно зробити копію fullName методу і внести деякі зміни.

Тепер, скопіюйте fullName метод, вставте його нижче і перейменуйте в birthdate. І зробіть наступні зміни:

  • Усюди де зустрічається nameInfo, замініть на birthInfo
  • Замість #fullname, використовуйте #birthday для змінної ele
  • Вставте цей шаблон регулярного виразу нижче вирази birthInfo.css ():
var patt = / ^ [0-9] {2} \ - [0-9] {2} \ - [0-9] {4} $ / i;
  • Наше колишнє if () вираження повинно бути:
if (! patt.test (ele.val ()))
  • Повідомлення до цього поля буде наступне: type in date in correct format

Ось як повинен виглядати birthdate метод, після внесення цих змін:

'BirthDate': function () {$ ( 'body'). Append ( '<div id = "birthInfo" class = "info"> </ div>'); var birthInfo = $ ( '# birthInfo'); var ele = $ ( '# birthday'); var pos = ele.offset (); birthInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); var patt = / ^ [0-9] {2} \ - [0-9] {2} \ - [0-9] {4} $ / i; if (! patt.test (ele.val ())) {jVal.errors = true; birthInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← type in date in correct format'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {birthInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}

За допомогою регулярного виразу (14 рядок), ми перевіряємо, щоб дата була в форматі 28-03-1987. У 16 рядку, ми перевіряємо відповідність дати народження користувача з шаблоном регулярного виразу.

І звичайно ж, нам потрібно прикріпити подія change () для поля дати народження:

$ ( '# Birthday'). Change (jVal.birthDate);

Тепер ми маємо ще один працюючий метод валідації форми на jQuery. Відмінна робота!

Валідація поля стати

Знову скопіюйте метод fullName, перейменуйте його в gender і внесіть наступні зміни:

  • Все nameInfo перейменуйте в genderInfo
  • Замість #fullname, застосуєте #woman для змінної ele
  • У вираженні genderInfo.css (), змінну top змініть на top: pos.top-10, і left на left: pos.left + ele.width () + 60
  • Наше вираз if () має бути:
if ($ ( 'input [name = "gender"]: checked'). length === 0)
  • Повідомлення користувачу буде: are you a man or a woman?

Ось як повинен виглядати метод gender, після змін:

'Gender': function () {$ ( 'body'). Append ( '<div id = "genderInfo" class = "info"> </ div>'); var genderInfo = $ ( '# genderInfo'); var ele = $ ( '# woman'); var pos = ele.offset (); genderInfo.css ({top: pos.top-10, left: pos.left + ele.width () + 60}); if ($ ( 'input [name = "gender"]: checked'). length === 0) {jVal.errors = true; genderInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← are you a man or a woman?'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {genderInfo..removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}

У рядку 14 ми перевіряємо скільки вибрано селектор radio. Якщо 0, то користувач нічого не вибрав, виводимо повідомлення про помилку.

І як завжди, прикріплюємо gender метод для radio кнопок:

$ ( 'Input [name = "gender"]'). Change (jVal.gender);

Валідація checkers - володіння транспортом

Тепер скопіюємо gender методи і перейменуємо його у vehicle, внесемо такі зміни:

  • Все genderInfo замініть на vehicleInfo
  • Замість #woman, впишіть #ship для ele.
  • У vehicleInfo.css () вираженні, значення left має бути left: pos.left + ele.width () + 40
  • Наше вираз if () має тепер бути:
if ($ ( 'input [name = "vehicle"]: checked'). length <= 1)
  • Повідомлення для користувача: I am sure you have at least two!

Ось як повинен виглядати цей метод, після змін:

'Vehicle': function () {$ ( 'body'). Append ( '<div id = "vehicleInfo" class = "info"> </ div>'); var vehicleInfo = $ ( '# vehicleInfo'); var ele = $ ( '# ship'); var pos = ele.offset (); vehicleInfo.css ({top: pos.top-10, left: pos.left + ele.width () + 40}); if ($ ( 'input [name = "vehicle"]: checked'). length <= 1) {jVal.errors = true; vehicleInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← I am sure you have at least two!'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {vehicleInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}

У рядку 14, ми визначаємо скільки транспортних засобів вибрав користувач. Якщо менше двох, виводимо повідомлення про помилку. Якщо кількість вибраних checkbox одно або менше 1, отже помилка.

Знову чіпляємо цей метод до полю vehicle:

$ ( 'Input [name = "vehicle"]'). Change (jVal.vehicle);

Напевно ви вже втомилися ... Ще парочка методів, для повноцінної jQuery валідації. Прийшов час для email валідації.

Валідація поля Email

Скопіюємо метод birthdate, перейменуємо в email і внесемо зміни:

  • Все birthInfo поміняємо на emailInfo
  • Замість #birthday, напишемо #email в значенні змінної ele
  • Наше колишнє регулярний вираз, буде:
var patt = /^.+@.+[.].{2,}$/i;
  • Повідомлення користувачу: give me a valid email adress, ok?

Ось як буде виглядати метод email, після внесення змін:

'Email': function () {$ ( 'body'). Append ( '<div id = "emailInfo" class = "info"> </ div>'); var emailInfo = $ ( '# emailInfo'); var ele = $ ( '# email'); var pos = ele.offset (); emailInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); var patt = /^.+@.+[.].{2,}$/i; if (! patt.test (ele.val ())) {jVal.errors = true; emailInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← give me a valid email adress, ok?'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {emailInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}

У рядку 14, регулярний вираз має такий зміст: один або більше символів до @, після також один або більше символів, потім йде. після чого 2 або більше символів. Ось приклад валидного email: [email protected]

І як завжди, чіпляємо email метод до поля:

$ ( '# Email'). Change (jVal.email);

Валідація поля інформації про користувача

Для цього останнього методу, скопіюйте fullName метод, перейменуйте його в about і внесіть зміни:

  • Все nameInfo поміняйте на aboutInfo
  • Замість #fullname, впишіть #about в значення змінної ele
  • Наше колишнє вираз if () буде:
if (ele.val (). length <75)
  • Повідомлення в разі помилки: come on, tell me a little bit more!

Ось як, повинен виглядати цей метод, після внесення змін:

'About': function () {$ ( 'body'). Append ( '<div id = "aboutInfo" class = "info"> </ div>'); var aboutInfo = $ ( '# aboutInfo'); var ele = $ ( '# about'); var pos = ele.offset (); aboutInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); if (ele.val (). length <75) {jVal.errors = true; aboutInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← come on, tell me a little bit more!'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'). css ({ 'font-weight': 'normal'}); } Else {aboutInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}

Чіпляємо цей метод до поля:

$ ( '# About'). Change (jVal.about);

Ми тільки що створили всі методи для валідації на jQuery. Залишилося зробити дві речі: написати останній метод sendIt, управляти submit дією при натисканні «Підтвердити» у формі.

Пишемо метод sendIt

Цей метод буде викликатися після всіх валідірующіх методів, як останній, після кліка на «Підтвердити». Він перевіряє, чи існували помилки валідації. Хороша новина, він простіше від колишніх:

'SendIt': function () {if (! JVal.errors) {$ ( '# jform'). Submit (); }

Якщо змінна jVal.errors НЕ true, дозволяємо надсилання форми на сервер.

Управляємо дією submit

Останнє що нам залишилося, керувати процесом submit кнопки. Це робиться в такий спосіб:

$ ( '# Send'). Click (function () {var obj = $ .browser.webkit? $ ( 'Body'): $ ( 'html'); obj.animate ({scrollTop: $ ( '# jform' ) .offset (). top}, 750, function () {jVal.errors = false; jVal.fullName (); jVal.birthDate (); jVal.gender (); jVal.vehicle (); jVal.email () ; jVal.about (); jVal.sendIt ();}); return false;});

Отримуємо об'єкти для завантаження, при подію click. Так як різні браузери по різному сприймають прокрутку до верху сторінки, нам потрібно межах куди робити скролінг (рядок 2). Робимо скролінг до верху (рядок 3). Далі змінюємо змінну jVal.errors на false, щоб відправка даних виробилася успішно. Далі по черговості викликаємо всі валідаційні методи. Після чого повертаємо false, що означає, що ми запобігаємо відправку даних, до того як перевіримо їх на валідність.

Готовий продукт

Тепер наш jQuery скрипт валідації форми завершено. Він виглядає наступним чином:

$ (Document) .ready (function () {var jVal = { 'fullName': function () {$ ( 'body'). Append ( '<div id = "nameInfo" class = "info"> </ div> '); var nameInfo = $ (' # nameInfo '); var ele = $ (' # fullname '); var pos = ele.offset (); nameInfo.css ({top: pos.top-3, left: pos .left + ele.width () + 15}); if (ele.val (). length <6) {jVal.errors = true; nameInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← at least 6 characters'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong');} else {nameInfo.removeClass ( 'error'). addClass ( 'correct'). html ( '√'). show (); ele.removeClass ( 'wrong'). addClass ( 'normal');}}, 'birthDate': function () {$ ( 'body'). append ( '<div id = "birthInfo" class = "info"> </ div> '); var birthInfo = $ (' # birthInfo '); var ele = $ (' # birthday '); var pos = ele.offset (); birthInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); var patt = / ^ [0-9] {2} \ - [0-9] {2} \ - [0-9] {4} $ / i; if (! patt.test (ele.val ())) {jVal.errors = true; birthInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← type in date in corr ect format '). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {birthInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}, 'Gender': function () {$ ( 'body'). Append ( '<div id = "genderInfo" class = "info"> </ div>'); var genderInfo = $ ( '# genderInfo'); var ele = $ ( '# woman'); var pos = ele.offset (); genderInfo.css ({top: pos.top-10, left: pos.left + ele.width () + 60}); if ($ ( 'input [name = "gender"]: checked'). length === 0) {jVal.errors = true; genderInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← are you a man or a woman?'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {genderInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}, 'Vehicle': function () {$ ( 'body'). Append ( '<div id = "vehicleInfo" class = "info"> </ div>'); var vehicleInfo = $ ( '# vehicleInfo'); var ele = $ ( '# ship'); var pos = ele.offset (); vehicleInfo.css ({top: pos.top-10, left: pos.left + ele.width () + 40}); if ($ ( 'input [name = "vehicle"]: checked'). length <= 1) {jVal.errors = true; vehicleInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← I \' m sure you have at least two! '). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {vehicleInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}, 'Email': function () {$ ( 'body'). Append ( '<div id = "emailInfo" class = "info"> </ div>'); var emailInfo = $ ( '# emailInfo'); var ele = $ ( '# email'); var pos = ele.offset (); emailInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); var patt = /^.+@.+[.].{2,}$/i; if (! patt.test (ele.val ())) {jVal.errors = true; emailInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← give me a valid email adress, ok?'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'); } Else {emailInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}, 'About': function () {$ ( 'body'). Append ( '<div id = "aboutInfo" class = "info"> </ div>'); var aboutInfo = $ ( '# aboutInfo'); var ele = $ ( '# about'); var pos = ele.offset (); aboutInfo.css ({top: pos.top-3, left: pos.left + ele.width () + 15}); if (ele.val (). length <75) {jVal.errors = true; aboutInfo.removeClass ( 'correct'). addClass ( 'error'). html ( '← come on, tell me a little bit more!'). show (); ele.removeClass ( 'normal'). addClass ( 'wrong'). css ({ 'font-weight': 'normal'}); } Else {aboutInfo.removeClass ( 'error'). AddClass ( 'correct'). Html ( '√'). Show (); ele.removeClass ( 'wrong'). addClass ( 'normal'); }}, 'SendIt': function () {if (! JVal.errors) {$ ( '# jform'). Submit (); }}}; // ================================================ ====== // $ ( '# send'). click (function () {var obj = $ .browser.webkit? $ ( 'body'): $ ( 'html'); obj.animate ({ scrollTop: $ ( '# jform'). offset (). top}, 750, function () {jVal.errors = false; jVal.fullName (); jVal.birthDate (); jVal.gender (); jVal.vehicle (); jVal.email (); jVal.about (); jVal.sendIt ();}); return false;}); $ ( '# Fullname'). Change (jVal.fullName); $ ( '# Birthday'). Change (jVal.birthDate); $ ( 'Input [name = "gender"]'). Change (jVal.gender); $ ( 'Input [name = "vehicle"]'). Change (jVal.vehicle); $ ( '# Email'). Change (jVal.email); $ ( '# About'). Change (jVal.about); });

после слів

Ми це зробили! Гаразд, ви це зробили! Сподіваюся вам сподобався цей урок і ви вивчили щось нове. Якщо ви маєте питання з приводу jQuery валідації, задайте їх в коментарях. Дякую вам за увагу і ваш інтерес до нашого сайту! Успіхів вам.


Джерело матеріалу ...

далі: jQuery портфоліо: гарне портфоліо на jQuery + CSS3


Що ми сьогодні дізнаємося?
Як ми реалізуємо jquery валідацію?
Що ж ми будемо робити?
Що ми сьогодні дізнаємося?
Як ми реалізуємо jquery валідацію?
Чому?
Що ж ми будемо робити?
Чи не так?
Як ми хочемо це зробити?
Як ми цього доб'ємося?

Новости