Prehľad validácie formulára HTML
Webové formuláre sú často najpoužívanejšou a nevyhnutnou súčasťou webových aplikácií. Validácia formulárov je proces validácie údajov zadaných používateľom na základe preddefinovaných pravidiel. Overenie formulára sa môže uskutočniť buď na strane klienta alebo na strane servera. Validácia HTML formulára je forma validácie na strane klienta, kde sa validácia údajov uskutoční pred odoslaním údajov na server. Validácia HTML formulára je významná a užitočná, pretože zvyšuje užívateľské rozhranie na strane klienta a výkon webovej aplikácie.
Validácia HTML formulára
Existujú hlavne dva spôsoby, ako je možné vykonať overenie HTML formulára,
- Použitie zabudovanej funkcie HTML5
- Pomocou JavaScriptu
1. Používanie zabudovanej funkcie HTML5
HTML5 poskytuje túto funkciu overovania formulárov bez použitia JavaScriptu. Prvky formulára budú mať pridané validačné atribúty, ktoré nám umožnia automatické overenie formy. Atribúty overenia nám umožňujú určiť rôzne druhy pravidiel týkajúcich sa našich prvkov formulára. Umožňujú nám nastaviť dĺžku údajov, nastaviť obmedzenia na hodnoty údajov atď.
Pozrime sa na jeden jednoduchý príklad overenia formy HTML pomocou vstavaných prvkov na overenie formy a potom budeme pokračovať ďalej pri overovaní formy HTML pomocou JavaScriptu.
príklad
Validácia formulára pomocou atribútu validácie HTML5 - V tomto príklade použijeme požadovanú značku validácie formulára, ktorá spôsobí, že údaje v tomto poli budú povinné, inak nebude formulár odoslaný. Nižšie je uvedený útržok kódu spolu s určitým štýlom webového formulára.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Máme teda veľmi jednoduchý webový formulár spolu s iba jedným vstupným dátovým poľom ako „Názov“. Upozorňujeme, že v prvku vstupnej značky sme použili požadované kľúčové slovo.
Výstup :
Skúsme odoslať formulár bez zadania hodnoty do poľa pre názov. Po odoslaní sa zobrazí chybová správa „Vyplňte toto pole“ a formulár sa neodošle.
Výstup s prázdnymi údajmi
Je teda zrejmé, že chybové hlásenie sme nepridali my a poskytujeme ho samotným HTML.
Rovnako ako požadovaný atribút poskytovaný HTML, existujú aj rôzne značky formulárov, ktoré je možné použiť. Nižšie je uvedený zoznam niektorých značiek validácie formulárov,
- minlength: Používa sa na nastavenie požadovanej minimálnej dĺžky prvku
- maxlength: Používa sa na nastavenie požadovanej maximálnej dĺžky prvku
- pattern: Používa sa na definovanie regulárneho výrazu
2. Pomocou JavaScriptu
JavaScript sa bežne používa na overovanie formulárov HTML, pretože poskytuje viac spôsobov prispôsobenia a nastavenia pravidiel overovania. Niektoré staršie verzie prehliadača Internet Explorer tiež nepodporujú niektoré značky uvedené v kóde HTML5. Na overenie formulára sa JavaScript používa už dlhú dobu.
V validácii formy JavaScriptu v podstate definujeme funkcie na overenie údajov pred ich odoslaním na server. Môžeme implementovať akúkoľvek logiku potrebnú na dosiahnutie pravidiel validácie. JavaScript je týmto spôsobom flexibilnejší, pretože neexistujú žiadne obmedzenia pri definovaní pravidiel. Na implementáciu je však potrebné mať vedomosti o JavaScripte v porovnaní s validáciou formulárov pomocou vstavaných značiek.
Pozrime sa na príklad overenia formulára pomocou JavaScriptu. Rovnaký príklad formulára implementujeme iba s jedným vstupom ako element name.
Príklad:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Z predchádzajúceho príkladu sme odstránili požadovanú značku z elementu formulára „name“. Namiesto toho sme do prvku formulára pridali jednu značku onsubmit. Ako už bolo spomenuté, budeme písať funkciu pre validáciu, ku ktorej je značka pridaná.
Napísali sme funkciu s názvom validateForm (), ktorá vykoná overenie. Vykonávame rovnaké pravidlo kontroly, či sú zadané údaje v poli názvu prázdne alebo nie. Logika na kontrolu je po kliknutí na tlačidlo Odoslať, táto funkcia sa zavolá a zadaná hodnota sa skontroluje, či je null alebo prázdna. Funkcia sa vráti v prípade, že údaje nie sú nulové alebo prázdne, ale ak sú údaje prázdne alebo nulové, používateľovi sa zobrazí chybová správa.
Výkon
Ak sa pokúsime odoslať formulár bez zadania akýchkoľvek údajov, mali by sme dostať chybové hlásenie na obrazovku. Ako vyplýva z príkladu, že chybové hlásenie sme navrhli rovnakým spôsobom.
Výstup s prázdnymi údajmi
Záver - Validácia HTML formulára
Videli sme teda veľmi jednoduchý príklad validácie formulárov na strane klienta. Hlavne existujú dva spôsoby, ako vykonať validáciu HTML formulára. Prvý je pomocou vstavanej funkcie poskytovanej v HTML5 a druhý je pomocou JavaScriptu. Pri použití prvej metódy nemusíme písať ďalší kód.
Odporúčané články
Toto bol návod na overenie platnosti HTML formulára. Tu diskutujeme prehľad a dva spôsoby validácie HTML formulárov, pomocou ktorých sa dajú vykonať. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- Udalosti HTML
- Verzie Html
- Prvky HTML5
- Aplikácie HTML