• Главная
  • Карта сайта
Не найдено

Javascript перевірка полів форми

  1. короткий лікнеп
  2. Постановка задачі
  3. Аналіз варіантів перевірок.
  4. Організація зберігання інформації про перевіряються полях і типах перевірки.
  5. Скрипт перевірки заповнювання полів.
  6. Скрипт валідації форми.
  7. Додаткові заморочки.
  8. Підключення та приклади
Будь-який поважаючий себе сайт обожнює пропонувати відвідувачам заповнити якусь форму, будь то підписка на новини, реєстрація, або оформлення замовлення. А ось відвідувачі бувають різні; заповнюючи запропоновані поля, вони нерідко схильні давати волю фантазії, посилаючи часом на сервер такі дані, які ставлять обробник в глухий кут. Звичайно, добре написаний скрипт, який бере форму, повинен вміти перевіряти поля і змушувати користувача перенаповнений некоректні дані. Однак куди краще цю перевірку робити безпосередньо в момент заповнення форми, щоб не перевантажувати сервер зайвими запитами, та й час заповнює заощадити.

короткий лікнеп

Всі ми коли-небудь заповнювали форми. Дехто навіть обробляв зібрані ними результати, будь то зроблені в інтернет-магазині замовлення, або обратка по сервісу. Просячи користувача заповнити будь-яку інформацію, ми хочемо, щоб вона відповідала певним форматом, особливо якщо в подальші вона обробляється CMS на зразок 1C bitrix, WorldPress, і так далі. Адже якщо в графі телефон користувач чогось запише свій логін Skype, може виникнути помилка обробки даних: вони не запишуться, і користувача знову викине на сторінку заповнення форми. Отже, виникає питання про те, як би провести перевірку введених даних в режимі он-лайн і не допустити відправлення некоректних даних.

Роботу описуваного рішення, розробленого нами, можна відразу оцінити на прикладі процедури оформлення замовлення на сайті компанії "Ньюком" . А нижче почнемо розповідь про процес його розробки, а так же наведемо ще кілька прикладів.

Постановка задачі

Зробити простеньку javascript-перевірку полів форми перед її відправкою на сервер - справа кількох хвилин. Тільки от коли цю простеньку пишеш десятий раз для одного тільки сайту, мимоволі задумаєшся про автоматизацію цього процесу. У якийсь момент думки про це стали настільки нав'язливі, що довелося сісти і накатати мініатюрну бібліотеку, розбирається з полями.

Якщо розбити задачу на блоки, то вийде приблизно наступна схема:


Ну, якщо схема є, то давайте вже її реалізуємо.

Аналіз варіантів перевірок.

Які поля найчастіше зустрічаються в формах?

  • Текстові інпут, які, як правило, перевіряються або просто на заповненість, або на нескладні регулярні вирази на кшталт email-а або телефону.
  • Чекбокси, перевіряються на наявність позначки (на кшталт угоди на обробку персональних даних).
  • Можна згадати і випадають списки, перевіряються на яке-небудь непорожнє значення.
  • Не варто забувати і про підступних радіокнопку. Чому підступних? У перевірці на позначку є підводні камені.
Зрозуміло, поле може бути як обов'язковим до заповнення, так і необов'язковим. Можлива ситуація, коли поле необов'язково, але якщо вже заповнюєш його - роби не аби як, а за правилом певного.

Раз вже ми взялися писати більш-менш універсальний скрипт, то потрібно подумати і про збочених незвичайних конструкціях, які в подальшому будуть називатися «групи». Під цим словом будемо мати на увазі пов'язані один з одним поля. Наприклад, якщо користувач поставив прапорець «Надсилати на пошту новини» - стає обов'язковим до заповнення пункт «e-mail», або телефон нерідко люблять розділяти на код і сам номер - тоді коректність повинна перевірятися по всіх полях, а некоректність одного тягне за собою помилку в обох. Та й повідомлення про помилки треба виводити не у всіх полів групи, а тільки у одного, інакше від їх кількості почне в очах рябіти.

Який висновок можна зробити?
Треба організувати звичайну перевірку на текстове поле, перевірку на email і «цифрові» поля на кшталт телефону, віку, ітп. Чекбокси і радиокнопки перевіряємо на властивість checked, що випадають списки - за значенням. Щоб задовольнити хитрі групи - написати обробник і для них. Крім того, забезпечити можливість перевірки деяких полів якийсь користувальницької функцією для особливо заморочений випадків.

Організація зберігання інформації про перевіряються полях і типах перевірки.

Припустимо, нам треба перевірити на е-мейл такий інпут:

На мій погляд, варіантів зберігання тут всього два:

  1. Створюємо javascript-об'єкт, в якому зберігаємо необхідні для перевірки поля.
  2. Засовує інформацію про перевірки безпосередньо в теги полів.

JS-об'єкт буде швидше працювати, та й виглядати куди більш коректно, ніж якісь нестандартні атрибути в тегах. Скажімо, виглядати він буде так:

var checkThis = {handle: '$ ( "[name = \' someName \ ']")', // покажчик на перевіряється поле type: 'email', // тип перевірки: звичайна, емейл, цифра title: 'введіть сюди емейл, наприклад ', // хинт про помилку nesess: true, // прапор обов'язковості group: false, // покажчик групи}; var AllChecks = [checkThis]; // а це - масив, де зберігалися б все перевіряються об'єкти

Якщо програміст добирається до сайту, коли він вже повністю зверстаний (тобто дія відбувається у фантастичному романі) - такий підхід прекрасний. Але найчастіше щось обов'язково буде дороблятися, в тому числі можуть дописуватися додаткові поля або створюватися нові форми, а залишати додавання обробників полів на совість верстальників, навіть при наявності написаного конструктора, - значить прирікати себе на постійні звернення з їх боку в стилі «а у мене тут все поламалося ». І тоді про головне постулаті задумки, автоматизації (ну, точніше, позбавлення себе-коханого від непотрібних рухів тіла), доведеться забути.

Тоді можна спробувати засовувати дані про перевірку в нестандартні атрибути, перетворюючи лаконічне

в громіздкого монстра на кшталт Зупинимося ми саме на цьому варіанті. Ми ж за універсальність.

Потім введемо такі оброблювані теги:

title Він, звичайно, стандартний, але сюди ми запишемо повідомлення про помилковий заповненні поля. І виводити будемо в стилі «Вкажіть» + title cfm_check Прапор перевірки, саме по ньому ми й будемо шукати перевіряються поля. А значення він може приймати такі:
  • Y - значить, треба перевіряти
  • email або num - позначає стандартну перевірку на email або цифри / телефон при заповнювання
  • Y_email / Y_num - обов'язкова перевірка на email або num
  • groupID {Y} - висновок елемента в групу з ідентифікатором groupID з параметрами перевірки, зазначеними в дужках
cfm_confirminfo За замовчуванням помилки будуть виводитися відразу після перевіряється елемента, що не завжди зручно. Так нехай же в цьому атрибуті ми вкажемо jq-селектор на елемент, після якого виводити помилку.
Наприклад, cfm_confirminfo = '# placeForErrors' cfm_function Щоб не ускладнювати перевантажений cfm_check, сюди ми запишемо назву нестандартної функції-перевірки поля

Скрипт перевірки заповнювання полів.

Інформацію ми отримали, залишилося лише її обробити. Алгоритм тут не заморочений:

  • на вхід подаємо покажчик на форму, в якій робити перевірку (у нас же багато форм може бути на сторінці!);
  • пробігаємо по зазначеним елементам форми, перевіряючи коректність заповнення;
  • якщо помилки є - маркеруем їх, якщо ні - дозволяємо перевірку форми.

Напевно, вже пора видати js-код, який реалізує функціонал хоча б частково, якщо вже відписана така купа тексту?

if (typeof cFM_classError === 'undefined') // сюди запишемо css-клас, приписують неправильним полях var cFM_classError = 'cFM_wrong'; function cFM_checktrueAttr (parent) // готує дані до обробки // (parent - jq-покажчик на форму, або об'єднує блок) {var error = true; // подчищаем за викликаної раніше функцією $ ( 'div.' + CFM_classError) .remove (); // прибираємо підказки $ ( '.' + CFM_classError) .each (function () {// прибираємо підсвічування помилок $ (this). removeClass (cFM_classError);}); // шукаємо поля для перевірки var inputsToHandle = false; if (typeof parent! == 'undefined') inputsToHandle = parent.find ( '[cFM_check]'); else inputsToHandle = $ ( '[cFM_check]'); // ну, а якщо батько не заданий - давайте вже все перевіримо // хапаємо знайдені елементи і спостерігаємо їх inputsToHandle.each (function () {if (error) error = cFM_prepareChecking ( this); // перевіряємо об'єкти, шукаємо хоча б єдину помилку else cFM_prepareChecking (this);}); return error; // повертаємо true, якщо всі елементи пройшли помилку, і false, якщо хтось завалився} function cFM_prepareChecking (handle) // запускає перевірку конкретного елемента і маркери помилкові {var error = true; / * значення, що повертається; сенс - просто показати, що є помилка приймає значення: true - немає помилок; false - поле не заповнено; 'Wrong' - поле заповнене неправильно; * / // визначаємося з підписом поля в разі виявлення в ньому помилки. За замовчуванням буде виводитися // "Вкажіть значення поля", якщо title не заданий var title = "значення поля"; if (typeof $ (handle) .attr ( 'title')! == 'undefined' && $ (handle) .attr ( 'title'). length> 0) title = $ (handle) .attr ( 'title') ; var after = handle; // куди ліпити повідомлення про помилку var attribute = $ (handle) .attr ( 'cFM_check'); // значення великого атрибута cFM_check // а не задали чи якусь хитру функцію для перевірки поля? if (typeof $ (handle) .attr ( 'cFM_function')! == 'undefined') var chkFunk = $ (handle) .attr ( 'cFM_function'); // нарешті, перевіряємо поле if (typeof chkFunk! == 'undefined') error = window [chkFunk] ($ (handle)); else error = cFM_checkFullness (handle); // якщо помилка закралася до нас if (error! == true) {// визначаємо, куди ліпимо повідомлення про помилку if (typeof $ (handle) .attr ( 'cFM_confirmInfo')! == 'undefined') {after = $ (handle) .attr ( 'cFM_confirmInfo'); if (after.indexOf ( 'self') === 0) // якщо раптом Селф непоймі навіщо приліпили after = after.substr (4); } If (error === 'wrong') // якщо поле заповнене неправильно $ (after) .after ( "
Некоректна поля "); else {if (error === false) // якщо не заповнено взагалі $ (after) .after ("
Вкажіть "+ title +" "); // html помилки else // якщо особлива перевірка з особливою html $ (after) .after ("
"+ Error +" ");} $ (handle) .addClass (cFM_classError); // додавання класу помилки if ($ (handle) .attr ( 'type') == 'radio') // допрацьовуємо радиокнопки $ ( '[ name = " '+ $ (handle) .attr (' name ') +'"] '). addClass (cFM_classError); error = false;} return error;} function cFM_checkFullness (handle) // а це стандартна функція перевірки { var error = true; // зчитуємо дані з атрибутів var attribute = $ (handle) .attr ( 'cFM_check'); // прапор обов'язковості var required = true; if (attribute.indexOf ( 'Y') === - 1 ) required = false; // перевірка на формат var format = attribute; if (required) format = attribute.substr (2); switch ($ (handle) .attr ( 'type')) // дивимося, що ж у нас за елемент такої {case 'checkbox': if (! $ (handle) .prop ( 'checked')) error = false; break; case 'radio': // обіцяна проблема з radio if (! $ (handle) .prop ( 'checked') && $ ( '[name = "' + $ (handle) .a ttr ( 'name') + ' "]: checked'). length == 0) error = false; else error = true; break; // і text, і select, і textarea тут ідентичні default: if (($ ( handle) .val (). trim (). length == 0 || $ (handle) .val () == '0') && required) error = false; else {if (format === 'num') // перевірка на число {var regCheck = new RegExp ( '[^ 0-9 \ s -] +'); if (regCheck.test ($ (handle) .val ())) error = 'wrong'; } If (format === 'email') // перевірка на е-мейл {var regCheck = new RegExp ( "^ ([0-9a-zA-Z] + [-._ + &]) * [0- 9a-zA-Z] + @ ([- 0-9a-zA-Z] + [.]) + [a-zA-Z] {2,6} $ "); if (! regCheck.test ($ (handle) .val ())) error = 'wrong'; }} Break; } Return error; }

Як приклад наведемо так само особливу функцію перевірки, наприклад, перевіряє на наявність двох слів в інпут (Ім'я Прізвище або Ім'я, Прізвище). Інпут, що запускає перевірку по цій функції реалізується таким чином:

А функція перевірки буде виглядати, наприклад, так: function checkName (handle) {var handleValue = handle.val (). Trim (); // як показує практика, користувачі чим тільки не відокремлюють своє ім'я від прізвища if (handleValue.indexOf ( "")! == - 1 || handleValue.indexOf ( ",")! == - 1 || handleValue.indexOf ( ".")! == - 1) return true; else return false; } Ну і стиль треба б який-небудь нашої перевірці задати: div.cFM_wrong {color: red; font-size: 10px; position: absolute; width: 140px; } Input.cFM_wrong {background: # ffd9d9; border-color: # d3adad; }

Скрипт валідації форми.

Тепер у разі успішного виконання функції cFM_checkFullness () (тобто повернення true) скрипт повинен відсилати форму на обробку. Як це реалізувати - залежить вже від конкретної форми. Якщо підтвердження на відправку йде через кнопку submit - то можна підписатися на подію відправки форми (onsubmit) і в залежності від результату перевірки відсилати її чи ні. Наприклад, так:

Якщо ж відправка йде за допомогою ajax'а - то тут взагалі все просто: викликати його в залежності від результату роботи функції cFM_checktrueAttr ($ (this));

Додаткові заморочки.

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

Що ж ми маємо в підсумку? Підключаючи пару файлів (.js і .css), отримуємо функціонал перевірки властивостей, який можна зі спокійною душею кидати на будь-які сайти, за умови підключеного jquery. Адже куди приємніше мати під рукою набір готових інструментів, ніж витрачати купу часу на їх виробництво перед кожною однотипної завданням.

Підключення та приклади

По-перше нам знадобиться бібліотека jquery. Завантажити її можна, наприклад, з офіційного сайту .
Або ж просто вставити в шапку (то, що всередині тега <head>) вашого сайту рядок

<Script type = 'text / javascript' src = 'http: //code.jquery.com/jquery-1.10.2.min.js'> </ script> Потім качаємо (правою клавішею -> сподобався пункт зі словом «зберегти ») звідси файл з js-кодом і, якщо потрібно, файл з css-стилями для помилкових полів звідси .
Додаємо в шапку і їх теж: <script type = 'text / javascript' src = '/ путьКСкріпту / ipol_cFM.js'> </ script> <link type = "text / css" rel = "stylesheet" href = "/ путьКCss /ipol_cFM.css "> Тепер потрібно розставити атрибути полях форми згідно таблиці , В залежності від того, яку перевірку ви хочете зробити.
Останній штрих - додавання тегу події onsubmit: «onsubmit =" return cFM_checktrueAttr ($ (this)); "».

Давайте тепер спробуємо реалізувати перевірку такої простенької форми:

Подивитися код

Оцінити застосування скрипта можна так само на сайті mosavtotrade , На всіх формах варто саме ця перевірка.

На сім потік інформації вичерпався.
В якості домашньої роботи можете взяти наступні пункти:

  1. Модернізація скрипта для роботи з груповими властивостями (і більш адекватна обробка радіокнопок з його допомогою)
  2. Модернізація скрипта встановити поля через об'єкт
Які поля найчастіше зустрічаються в формах?
Чому підступних?
Який висновок можна зробити?
Напевно, вже пора видати js-код, який реалізує функціонал хоча б частково, якщо вже відписана така купа тексту?
Attr ( 'cFM_check'); // значення великого атрибута cFM_check // а не задали чи якусь хитру функцію для перевірки поля?
Що ж ми маємо в підсумку?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью