Валідація форми на jQuery
Reg.ru: домени та хостинг
Найбільший реєстратор та хостинг-провайдер в Укаини.
Понад 2 мільйони доменних імен на обслуговуванні.
Понад 700 тис. клієнтів у всьому світі вже зробили свій вибір.
Безкоштовний Курс "Практика HTML5 та CSS3"
з основ адаптивної верстки
на HTML5 та CSS3 з повного нуля.
Фреймворк Bootstrap: швидка адаптивна верстка
Навчіться верстати просто, швидко та якісно, використовуючи потужний та практичний інструмент.
Верстайте на замовлення та отримуйте гроші.
Безкоштовний курс "Сайт на WordPress"
Бажаєте освоїти CMS WordPress?
Отримайте уроки з дизайну та верстки сайту на WordPress.
Навчіться працювати з темами та нарізати макет.
*Наведіть курсор миші, щоб призупинити прокручування.
Валідація форми на jQuery
Вихідники
Приклад
У сьогоднішній статті ми з Вами створюватимемо скрипт валідації форми за допомогою javascript-бібліотеки jQuery.
Валідація - це просто кажучи, перевірка введених користувачем даних у форму на відповідність тим чи іншим параметрам.
У цьому уроці буде розглянуто jQuery-скрипт для валідації форми зворотного зв'язку та надсилання даних за допомогою Ajax-запиту.
Створимо HTML структуру нашої форми:
Далі пропишемо CSS стилі для нашої форми:
Тепер наша форма виглядає так:
Після того, як форма готова, приступаємо до написання коду для валідації:
Логіка роботи буде наступною: коли користувач прибирає курсор з поля (поле втрачає фокус), воно проходить певну перевірку.
Якщо все введено відповідно до параметрів правильно, тоді полю надається клас"not_error". Інакше якщо поле не пройшло перевірку на правильність введених даних, воно отримує клас "error".
Привласнення класів - також важливий момент у реалізації цього валідації підходу. Саме вони дозволять нам перевірити, чи буде доступна функція відправки форми чи ні при натисканні на кнопку її відправлення.
На самому початку ставимо умову, коли DOM завантажена, ми включаємо скрипт у роботу.
До набору об'єктів на перевірку ми включаємо всі потрібні поля нашої форми. Як унікальні значення кожному з об'єктів форми задаємо свій ідентифікатор. Встановлюємо подію втрати фокусу blur на кожен об'єкт із набору.
Коли поле втратило фокус, спрацював метод blur, конструкцією switch-case повіряється, яке саме це поле було. Для визначення ми якраз і використовуватимемо ті самі ідентифікатори полів.
Для зручності в змінніidіvalми помістили значення ідентифікатора поля, яке втратило фокус і його значення.
У блоці case ми вже здійснюємо перевірку поточного поля на параметри, які нам необхідні. Наприклад, у моєму прикладі я перевіряю поле імені регулярним виразом і також на довжину введеного в нього значення.
Якщо введене користувачем значення проходить перевірку, тоді я додаю полю потрібний клас (про них я говорив вище) і візуалізую його потрібними ефектами - тут працює вже тільки Ваша фантазія.
Така сама схема роботи з усіма об'єктами форми.
Користувач заповнив усі поля, припустимо правильно, і натискає кнопку відправки цієї форми:
Спочатку ми забороняємо стандартну поведінку при натисканні на кнопку Submit. І найголовніше - у блоці if ми перевіряємо кількість елементів із класом not_error.
Нагадаю, цей клас ми додавалидо всіх полів без помилок. Так як кількість об'єктів нашої форми, що перевіряються, було всього 3, то ми перевіряємо кількість елементів з даним класом. Якщо умова спрацьовує, тоді ми складаємо AJAX-запит на відправку даних форми в PHP-обробник.
Якщо кількість полів з цим класом не буде однаковою нам кількості, форма не відправиться. Тобто. щоб відправити форму, поля у будь-якому випадку повинні отримати фокус та отримати правильне значення. Інакше скрипт поверне FALSE (брехня) під час відправлення.
Обробник send.php
На цьому все. Сподіваюся, цей матеріал буде для вас гарною основою для власних рішень.