Відмінності між версіями «Валідиція HTML»

Версія за 21:16, 21 листопада 2011

Валідація HTML-форм і розширення функціональності з пісочниці

Валідації HTML-форм приділяють дуже мало уваги. Наприклад, навіть на habrahabr.ru поки я реєструвався і входив на сайт кілька разів мені видавалося повідомлення про помилку: то код протекції ввів неправильно, то в логіні вказав email замість логіна. А ще буває користувачі помиляються з кількістю цифр в номері телефону або реквізитах організації, плутають російську літеру «с» з англійською, при копіюванні та вставці в Windows зайві пропуски додаються до даних.

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

Для вирішення даної проблеми були кілька способів: HTML5, jQuery Validate, zForms.ru і ще ряд менш відомих бібліотек. Але всі ці способи мали свої недоліки: HTML5 підтримується не всіма браузерами і не має опції не відправляти незаповнені поля, задати повідомлення про невідповідність регулярному виразу, обмежити список допустимих символів для введення в поле, можливості склеювати поля, посилати значення чекбоксів у форматі csv або суми значень.

У zForms.ru немає вихідного, немає можливості вказати, що перевірка користувальницької функцією ресурсномістка і її потрібно робити за подією onChange, а не onKeyup. Функціональність задається дуже громіздким оформленням, яке заважає оформити форму як нам того хочеться. І багато параметри передаються у вигляді: onclick = «return {oOptions: {sPlaceHolder: Не більше 10 символів ', iMaxLength: 10}}», що є не найпростішим чином для веб-майстра.

jQuery Validate вимагає знань javascript і jQuery. Хоча зрозуміло, що тут можна запрограмувати HTML-форму як завгодно.

Але нам потрібен був простий інструмент для веб-майстри, де можна було просто задавати додаткові атрибути тегів input, select, а вся функціональнасть підключається автоматично. Ось ми і написали бібліотеку ITForms.class.js. Бібліотека безкоштовна і активно розвивається. Ось що вже зараз підтримується:<form… data-dont-send-empty-fields=1> - Якщо data-dont-send-empty-fields = true в тегу form, то перед відправленням будуть видалені всі незаповнені поля введення. Дуже зручно для фільтрів пошуку, коли інформація передається методом GET.

<Input ... data-min-length - мінімальна кількість символів для текстових полів. data-min-length = 1 означає по суті, що поле обов'язково до заповнення.

<Input ... data-regexp - перевірка текстового поля на регулярний вираз.

<Input ... data-enable-chars - список допустимих символів, інші символи з клавіатири ввести не вийде.

<Input ... data-placeholder - встановлює Placeholder в текстове поле. Відрізняється від стандартної реалізації HTML5 тим, що якщо в полі ввести символи і потім встановити пусте значення, то data-placeholder показуватися не буде щоб не бентежити користувача. У вас є вибір яка поведінка вибирати стандартне - placeholder або data-placeholder.

<Input | select ... data-help - створює підказку при установці фокуса на текстове поле.

<Select ... data-combobox - встановити для поточного списку комбобокс.

<Input ... data-min-value - мінімальне значення числа та дати;

<Input ... data-max-value - максимальне значення числа та дати;

<Select multiple = «multiple» ... data-min-selected - мінімальна кількість вибраних елементів в select-multiple.

<Select multiple = «multiple» ... data-max-selected - максимальна кількість обраних елементів в select-multiple.

<Input type = file ... data-file-type - тип завантаження. Може бути вказано кілька типів через кому.

<Input | select ... data-user-func - виклик для користувача функції для додаткової перевірки. Користувацька функція повертає повідомлення про помилку або порожній рядок у разі успішної перевірки. Користувацька функція може перевіряти валідність поля в залежності від значень інших полів форми. Також вона може динамічно в залежності від значення поля довантажувати AJAX'ом нові нові поля форми, дані, змінювати інші поля форми. Приклад: data-user-func = «funcAlert ('1 параметр ', '2 параметр');»

<Input ... data-datepicker | data-datetimepicker | date-timepicker - встановлюємо для поточного поля один з трьох календарів.

<Input ... data-async - Якщо data-async = true, то значення перевіряється після введення кожного символу. Якщо data-async = false, то значення поля перевіряється після зняття з нього фокусу або перед відправкою.

<Input ... data-slider - прив'язуємо повзунок. Детальніше дивіться приклад.

<Input ... data-regexp-err-msg - повідомлення про помилку в разі невідповідності регулярному виразу.

Публічні методи:

setCheckboxProperty (checkboxname, sendAs, minSelected, maxSelected);

/ / SendAs може бути:

/ / 'Csv' - тоді значення вибраних чекбоксів надсилаються у вигляді checkboxname = v1, v2, v3 ... vn

/ / 'Sum' - тоді значення вибраних чекбоксів бінарно складаються s = v1 | v2 | v3 ... | vn і надсилається checkboxname = s

/ / В інших випадках і якщо не задано нічого чекбокси посилаються на сервер в стандартному вигляді.

addMergeableField (fieldname, separator, inputs) / / ім'я поля в яке будуть склеєні значення інших полів, роздільник, список полів для об'єднання

addEventListeners ($ ('jQuery selector')) / / після динамічного додавання елемента вводу в форму треба додати для нього обробники подій.

itform.setRadioProperty ('radioinput', 1); / / встановлюємо required = 1, щоб зробити вибір обов'язковим.