Přehled ověření formuláře HTML

Webové formuláře jsou často nejpoužívanější a základní součástí webových aplikací. Ověření formuláře je proces ověření údajů zadaných uživatelem na základě předdefinovaných pravidel. Ověření formuláře může probíhat na straně klienta nebo na straně serveru. Validace HTML formuláře je forma validace na straně klienta, kde bude validace dat provedena před odesláním dat na server. Ověření formuláře HTML je významné a užitečné, protože zvyšuje uživatelské rozhraní na straně klienta a výkon webové aplikace.

Ověření formuláře HTML

Existují hlavně dva způsoby, jak lze provést ověření HTML formuláře,

  • Pomocí vestavěné funkce HTML5
  • Pomocí JavaScriptu

1. Pomocí vestavěné funkce HTML5

HTML5 poskytuje tuto funkci ověření formuláře bez použití JavaScriptu. Prvky formuláře budou mít přidané atributy ověření, které nám umožní automatické ověření formuláře. Atributy ověření nám umožňují určit různé druhy pravidel na našich prvcích formuláře. Umožňují nám nastavit délku dat, nastavit omezení hodnot dat atd.

Podívejme se na jeden jednoduchý příklad validace HTML formuláře pomocí vestavěných elementů pro validaci formuláře a potom budeme pokračovat dále pro validaci HTML formuláře pomocí JavaScriptu.

Příklad

Ověření formuláře pomocí validačního atributu HTML5 - V tomto příkladu použijeme povinnou značku pro ověření formuláře, která způsobí, že údaje v tomto poli budou povinné, jinak nebude formulář odeslán. Níže je fragment kódu pro totéž spolu s určitým stylem webového formuláře.



.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 tedy velmi jednoduchý webový formulář spolu s pouze jedním vstupním datovým polem jako „Název“. Vezměte prosím na vědomí, že jsme v prvku vstupních značek použili požadované klíčové slovo.

Výstup :

Zkusme odeslat formulář bez zadání jakékoli hodnoty do pole názvu. Po odeslání se zobrazí chybová zpráva „Vyplňte prosím toto pole“ a formulář nebude odeslán.

Výstup s prázdnými daty

Je tedy vidět, že chybová zpráva není přidána námi a je poskytována samotným HTML.

Stejně jako požadovaný atribut poskytovaný HTML existují i ​​různé značky formulářů, které je možné použít. Níže je uveden seznam některých značek pro ověření formuláře,

  • minlength: Používá se k nastavení požadované minimální délky prvku
  • maxlength: Používá se k nastavení požadované maximální délky prvku
  • pattern: Používá se k definování regulárního výrazu

2. Pomocí JavaScriptu

JavaScript je široce používán pro ověřování formulářů HTML, protože poskytuje více způsobů přizpůsobení a nastavení ověřovacích pravidel, a také některé značky poskytované v HTML5 nejsou ve starších verzích aplikace Internet Explorer podporovány. JavaScript se dlouho používá pro ověření formuláře.

V validaci formuláře JavaScript v podstatě definujeme funkce pro ověření dat před jejich odesláním na server. Můžeme implementovat jakoukoli logiku potřebnou pro dosažení validačních pravidel. JavaScript je tímto způsobem flexibilnější, protože neexistuje žádná omezení pro definování pravidel. Je však nutné mít znalosti JavaScriptu k implementaci ve srovnání s validací formulářů pomocí vestavěných značek.

Podívejme se na příklad ověření formuláře pomocí JavaScriptu. Budeme implementovat stejný příklad formuláře s pouze jedním vstupem jako element name.

Pří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 předchozího příkladu jsme odstranili požadovanou značku z elementu „name“. Místo toho jsme do elementu form přidali jednu značku onsubmit. Jak již bylo zmíněno, budeme psát funkci pro ověření, ke kterému je značka přidána.

Napsali jsme funkci s názvem validateForm (), která provede ověření. Provádíme stejné pravidlo kontroly, zda jsou zadaná data v poli názvu prázdná nebo ne. Logika pro kontrolu je po kliknutí na tlačítko Odeslat, tato funkce bude volána a zadaná hodnota bude zkontrolována, zda je nulová nebo prázdná. Funkce se vrátí true v případě, že data nejsou nulová nebo prázdná, ale pokud jsou data prázdná nebo nulová, pak se uživateli zobrazí chybová zpráva.

Výstup

Pokud se pokusíme odeslat formulář bez zadání jakýchkoli údajů, měli bychom na obrazovku zobrazit chybové hlášení. Jak je patrné z příkladu, navrhli jsme chybové hlášení stejným způsobem.

Výstup s prázdnými daty

Závěr - Ověření formuláře HTML

Viděli jsme tedy velmi jednoduchý příklad validace formuláře na straně klienta. Hlavně existují dva způsoby, jak provést ověření HTML formuláře. První je pomocí vestavěné funkce poskytované v HTML5 a druhý je pomocí JavaScriptu. Při použití první metody nemusíme psát další kód.

Doporučené články

Toto byl průvodce validací formuláře HTML. Zde diskutujeme přehled a dva způsoby validace HTML formuláře, pomocí kterých je lze provádět. Další informace naleznete také v následujících článcích -

  1. Události HTML
  2. Verze Html
  3. Prvky HTML5
  4. Aplikace HTML

Kategorie:

Nástroje pro vývoj webových aplikací