Html5, валідація форм

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

Творці HTML5 змогли побачити цю потребу і винайшли спосіб привернути браузери на допомогу, переклавши завдання перевірки з плечей веб-розробників на веб-оглядачі. Творці HTML5 розробили систему перевірки на стороні клієнта, яка дозволяє вставляти основні правила валідації в будь-яке поле . Найкраще в цій системі - це її простота і легкість: все, що потрібно зробити - так це вставити правильний атрибут.

Як працює перевірка HTML5?

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

Наприклад, припустимо, що певне поле не можна залишати порожнім, і відвідувач повинен ввести в нього хоч щось. У HTML5 це здійснюється за допомогою атрибута required у відповідному полі (далі допрацьовуємо приклад з попередньої статті):

Навіть із застосуванням для поля атрибута required на цю вимогу немає ніяких візуальних покажчиків за замовчуванням. Тому слід звернути увагу користувача на цю вимогу за допомогою будь-яких своїх візуальних ознак, наприклад, виділивши рамку поля кольором і поставивши біля нього зірочку.

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

Виникає ще одне питання: що буде, якщо порушено кілька правил перевірки, наприклад, не заповнено кілька обов'язкових полів?

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

відключення перевірки

У деяких випадках може знадобитися відключити перевірку. Наприклад, ви хочете протестувати свій серверний код на правильність обробки надійшли некоректних даних. Щоб відключити перевірку для всієї форми, в елемент

додається атрибут novalidate.

Інший підхід - це відключити перевірку в кнопці для відправки форми. Такий спосіб іноді корисний у цій веб-сторінці. Наприклад, замість відправки, може бути, потрібно зберегти наполовину заповнену форму для подальшого використання. Щоб отримати таку можливість, в елемент відповідної кнопки вставляється атрибут formnovalidate.

Виявлення незаповнених полів - це лише один з кількох типів перевірки. Пізніше ми розглянемо виявлення помилок в даних різних типів.

Оформлення результатів перевірки

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

Все, що для цього потрібно - це додати кілька простих CSS3-псевдокласів. Доступні такі опції:

required і optional

Застосовують форматування до полю в залежності від того, чи використовує це поле атрибут required чи ні;

Застосовують форматування до полю в залежності від правильності введеного в нього значення. Але не забувайте, що більшість браузерів не перевіряє дані, поки користувач не спробує відправити форму, тому форматування полів з некоректними значеннями не виконується відразу ж при введенні такого значення;

Форматування до полів, для яких використовується атрибут min або max, щоб обмежити їх значення певним діапазоном значень.

Перевірка за допомогою регулярних виразів

Квадратні дужки на початку рядка визначають діапазон допустимих символів. Іншими словами, група [A-Z] дозволяє будь-які великі літери від А до Z. Наступна за нею частину в фігурних дужках вказує множник, тобто означає, що потрібні три великі літери. Наступне тире не має ніякого спеціального значення і означає саме себе, тобто вказує, що після трьох великих літер має бути тире. Нарешті, [0-9] позначає цифри в діапазоні від 0 до 9, а вимагає три таких цифри.

Регулярні вирази корисні для пошуку в тексті рядків, що відповідають умовам, заданих в вираженні, і перевірки, що певна рядок відповідає заданим регулярним виразом шаблоном. У формах HTML5 регулярні вирази застосовуються для валідації.

Для позначення початку і кінця значення в поле символи ^ і $, відповідно, не потрібні. HTML5 автоматично передбачає наявність цих двох символів. Це означає, що значення в поле повинно повністю збігтися з регулярним виразом, щоб його можна було вважати коректним.

Таким чином у такому значенні будуть допустимими для цього регулярного виразу:

Але регулярні вирази дуже швидко стають більш складними, ніж розглянутий нами приклад. Тому створення правильного регулярного виразу може бути досить трудомістким завданням, що пояснює, чому більшість розробників вважає за краще використовувати для перевірки даних на своїх сторінках готові регулярні вирази.

Щоб застосувати отримане тим чи іншим шляхом регулярний вираз для перевірки значення поля або , його слід додати в цей елемент як значення атрибуту pattern.</p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/24/68/424x224_59uwfmavi53pbcwpgha7.webp" width="424" height="224" title="Html5, валідація форм (кнопку відправки форми)" alt="Html5, валідація форм" ></div></p> <p>Найбільш корисним з них є метод setCustomValidity (). з використанням якого можна написати спеціальний сценарій для перевірки конкретних полів, який буде працювати з системою валідації HTML5.</p> <p>Здійснюється це таким чином. Перш за все, значення відповідного поля перевіряється на правильність. Це робиться за допомогою звичайної події oninput:</p> <p>Якщо з поточним значенням поля є проблеми, при виклику методу setCustomValidity () йому необхідно передати повідомлення про помилку. Якщо ж поточне значення допустимо, цей метод викликається з нового рядка, таким чином очищаючи спеціальні повідомлення про помилку, які могли використовуватися раніше.</p> <p>Далі наводиться приклад використання цього методу для перевірки вимоги, щоб значення в поле містило не менше 20 символів:</p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/24/68/424x157_3j4tpeu3s5tjxq0clq7n.webp" width="424" height="157" title="Html5, валідація форм (форм)" alt="Html5, валідація форм" ></div></p> <p>Звичайно, це завдання можна вирішити більш елегантно за допомогою регулярного виразу, що вимагає довгий рядок. Але в той час як регулярні вирази прекрасно підходять для перевірки певних типів даних, спеціальна логіка перевірки може робити все, що завгодно, від складних алгебраїчних обчислень до встановлення зв'язку з веб-сервером.</p> <h2>Підтримка перевірки браузерами</h2> <p>Розробники браузерів додавали підтримку перевірки в свої продукти по частинах, внаслідок чого деякі версії браузерів підтримують одні можливості валідації, але не звертають уваги на інші. У таблиці нижче вказані мінімальні версії браузерів, повністю підтримують валідацію HTML5:</p> <p>Підтримка перевірки браузерами</p> <p>Так як перевірка HTML5 не замінює валідацію на стороні сервера, її можна розглядати як другорядну можливість, коли навіть така недосконала підтримка краще, ніж відсутність взагалі будь-якої підтримки. У браузерах, які не підтримують перевірку, таких як IE 9, можна відправляти форми з некоректними даними, але ці помилки можна виявити на стороні сервера і повернути цю сторінку назад браузеру, але з зазначеними помилками.</p> <p>Бібліотека webforms2 реалізує всі розглянуті на даний момент атрибути. Для використання бібліотеки завантажте всі її файли в папку свого веб-сайту (а краще в підкаталог папки веб-сайту) і додайте в веб-сторінці посилання на цю бібліотеку.</p></div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/tina-karol-pidstriglasja-pid-hlopchika.html">Тіна кароль підстриглася під хлопчика, посперечавшись з чоловіком</a></li> <li><a href="/articles/jak-vplivati-na-ljudej-za-dopomogoju-istorij.html">Як впливати на людей за допомогою історій - мистецтво переговорів</a></li> <li><a href="/articles/krivosheja-u-novonarodzhenih-prichini-i-likuvannja.html">Кривошея у новонароджених причини і лікування</a></li> <li><a href="/articles/harakterni-oznaki-ta-etapi-tichki-u-kishki-jak.html">Характерні ознаки та етапи тічки у кішки, як заспокоїти тварину</a></li> <li><a href="/articles/png-klipart-dlja-dizajnu-landshaftnij-dizajn.html">Png кліпарт для дизайну - ландшафтний дизайн - дерева, кущі, камені, клумби</a></li> <li><a href="/articles/tovariskij-troickij-sobor.html">Товариський Троїцький собор</a></li> <li><a href="/articles/investuju-v-budivnictvo-bagatokvartirnih-budinkiv.html">Інвестую в будівництво багатоквартирних будинків - архів розділу - бізнес форум</a></li> <li><a href="/articles/den-tishi-jak-zhivut-gluhi-v-bila-cerkva.html">День тиші як живуть глухі в Біла Церква</a></li> <li><a href="/articles/dogovir-z-dispetcherom-transportni-poslugi.html">Договір з диспетчером, транспортні послуги, договори, юридичні послуги, бухгалтерський облік і право</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/kizilnik-bliskuchij-posadka-dogljad-rozmnozhennja.html">Кизильник блискучий посадка, догляд, розмноження</a></li> <li><a href="/articles/dlja-chogo-na-mashinu-stavljat-interkuler.html">Для чого на машину ставлять інтеркулер</a></li> <li><a href="/articles/natura-siberika-dennij-krem-dlja-chutlivoi.html">Натура Сіберіка денний крем для чутливої шкіри обличчя купити в інтернет-магазині</a></li> <li><a href="/articles/magazin-accessorize-katalog-odjagu-oficijnij-sajt.html">Магазин accessorize - каталог одягу, офіційний сайт і адреси магазинів аксессорайз</a></li> <li><a href="/articles/genij-ortopedii.html">геній ортопедії</a></li> <li><a href="/articles/tushkovani-kabachki-z-kurkoju-pokrokovij-recept-z.html">Тушковані кабачки з куркою - покроковий рецепт з фото готового блюда</a></li> <li><a href="/articles/swordsman-ogljad-reestracija-oficijnij-sajt.html">Swordsman - огляд, реєстрація, офіційний сайт</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2026</p> <ul> <li><a href="/articles/jakist-osobistosti-shhirist-shho-take-shhirist.html">Якість особистості щирість, що таке щирість</a></li> <li><a href="/articles/skilki-vuglevodiv-potribno-v-den-pri-shudnenni.html">Скільки вуглеводів потрібно в день при схудненні, добова норма і калькулятор</a></li> <li><a href="/articles/shho-podaruvati-levu-1.html">Що подарувати леву 1</a></li> <li><a href="/articles/jaki-vlastivosti-mae-alpanit-opis-kamenju-perevagi.html">Які властивості має алпаніт опис каменю, переваги і недоліки, догляд за виробом з Алпаніти</a></li> <li><a href="/articles/jak-mi-ihali-vidpochivati-i-potrapili-na-vijnu-ria.html">Як ми їхали відпочивати і потрапили на війну - ріа новини</a></li> </ul> </div> </footer></div> <style> #cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden} </style> <div id="cookieNoticeOverlay"> <div id="cookieNoticeBox" role="dialog" aria-modal="true"> <h2>Cookie на сайті</h2> <p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p> </div> </div> <script> (function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}} function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}} if(getAcceptedUntil()>now){return} var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return} function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')} function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')} okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return} var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})() </script></body> </html>