Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével

Szerencsére rengeteg módszer van rá, hogy a HTML segítségével vizsgáljuk meg, hogy egy űrlapmező ki van-e töltve, illetve azt, hogy megfelel-e az általunk támasztott elvárásoknak. De vannak olyan helyzetek, amikor a HTML által kínált lehetőségek nem elegendők számunkra, ilyenkor a JavaScript validációt kell választanunk.

Miért van szükség az űrlapmezők ellenőrzésére?

Az űrlapmezők bemeneti értékeinek az ellenőrzésére azért van szükségünk, mert általában fontos, hogy a felhasználó által beküldött adatok helyesek legyenek. Főleg egy olyan esetben, amikor az általa beküldött adatokat a későbbiekben fel kell használnunk, például egy termékrendelésnél. Ilyenkor a felhasználó által megadott címre szállítják ki a rendelt tárgyakat. De mi a helyzet akkor, ha a felhasználó nem megfelelő adatot írt be az irányítószámhoz? Az ilyen esetek elkerülésének érdekében szoktunk korlátozásokat tenni egy űrlap kitölthetőségét illetően. Például megszabjuk, hogy az irányítószámhoz, csak számot írhasson be, míg a névhez csak betűket.

Illetve nem csak a helyességet kell vizsgálnunk, hanem azt is, hogy a felhasználó kitöltötte-e a kötelező mezőket vagy sem. Hiszen nehéz kiszállítani egy rendelést, ha a vásárló nem adott meg szállítási címet.

Űrlapmezők ellenőrzése HTML segítségével

Elsőnek nézzük meg, hogy milyen lehetőségeket kínál a HTML, ha van olyan, amit igénybe szeretnénk venni és már a HTML beépítetten tartalmazza, akkor érdemes azt használni, hiszen rengeteg időt spórol nekünk, melyet JS programozással kellene töltenünk.

Ha a fent megadott eseteket szeretnénk vizsgálni, akkor nyugodtan forduljunk a HTML beépített attribútumaihoz, tulajdonságaihoz. Azonban, ha ennél komplexebb dolgokat szeretnénk vizsgálni, akkor kénytelenek leszünk a JavaScript-hez fordulni.

type

A HTML type tulajdonsággal megadhatjuk, hogy milyen típusú az adott HTML mező, így a felhasználót kényszeríthetjük arra, hogy csak a típusnak megfelelő értékeket írjon egy adott mezőbe. Azaz egy számtípusúba csak számokat írhat, ha betűket ír, akkor hibát fog jelezni a böngésző

A type attribútum az alábbi értékeket veheti fel:

• button
• checkbox
• date
• email
• file
• image
• password
• radio
• range

Ezeken kívül még több lehetséges értéke van, amelyekről itt olvashatsz bővebben.

Szintaktika

<input type="TÍPUS">
Code language: HTML, XML (xml)

Példa

<form>
   <input type="number" placeholder="Szám">
   <input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

required

Ezzel az attribútummal ellátott elemek kitöltése kötelező.

Szintaktika

<input type="TÍPUS" required>
Code language: HTML, XML (xml)

Példa

<form>
	<input type="text" placeholder="Kötelező" required >
<input type="text" placeholder="Nem kötelező">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

disabled

Valójában ez nem egy űrlap elem ellenőrzési mód, ezzel tulajdonképpen csak megtudjuk tiltani, hogy egy űrlap elem kitölthető legyen, viszont ez is egy kis JavaScript-tel megfűszerezve űrlap validációs eszközként szolgál.

Szintaxis

<input type="TÍPUS" disabled>
Code language: HTML, XML (xml)

Példa

<input type="button" value="Gomb1">
<input type="button" value="Gomb2" disabled>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

max

Segítségével megadhatunk egy maximális értéket, ami fölé nem mehet a beviteli mezőben szereplő érték.

Szintaktika

<input type="TÍPUS" max="ÉRTÉK">
Code language: HTML, XML (xml)

Példa

<form>
	<input type="number" max="10">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

min

Segítségével megadhatunk egy minimális értéket, ami alá nem mehet a beviteli mezőben szereplő érték.

Szintaktika

<input type="TÍPUS" min="ÉRTÉK">
Code language: HTML, XML (xml)

Példa

<form>
	<input type="number" min="10">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

maxlength

A maxlength tulajdonsággal meghatározhatjuk, hogy maximum hány karaktert lehessen beírni a beviteli mezőbe.

Szintaktika

<input type="TÍPUS" maxlength="ÉRTÉK">
Code language: HTML, XML (xml)

Példa

<form>
	<input type="text" maxlength="5">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

minlength

A minlength a minimálisan beírandó karakterek számát határozza meg.

Szintaxis

<input type="TÍPUS" minlength="ÉRTÉK">
Code language: HTML, XML (xml)

Példa

<form>
	<input type="text" minlength="5">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

pattern

A HTML pattern használatához szükséges ismernünk a reguláris kifejezéseket, melyek segítségével pontosan megszabhatjuk, hogy hogyan nézzen ki a beviteli mezőbe beírható kifejezés. Ezzel tulajdonképpen bármit leírhatunk, azt is, hogy az első betű nagy legyen, a második kicsi, ne lehessen számot használni és hasonlóak.

Szintaxis

<input type="TÍPUS" pattern="ÉRTÉK">
Code language: HTML, XML (xml)

Példa

<form>
	<input type="text" pattern="[A-Z]{1}">
	<input type="submit">
</form>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben a példában a pattern segítségével megadtuk, hogy csak a nagybetűs A-tól Z-ig tartó karaktereket fogadja el és ezekből is csak pontosan egyetlen egy karaktert. Ha megnyomjátok a gombot és nem történik semmi, akkor a rendszer elfogadta a bemenetet, ha hibát ír ki, akkor a beírt szöveg helytelen.

onsubmit használata

Ahhoz hogy érzékeljük az űrlap leadását érdemes a HTML onsubmit eseményét használni. A HTML érzékeli, hogy a felhasználó megnyomta az űrlap leadásához szükséges gombot, majd az általunk megadott JavaScript függvényt fogja meghívni.

Ebbe a függvénybe mi pedig megírhatjuk az általunk szükséges vizsgálatokat.

Szintaxis

<form onsubmit="JS.FÜGGVÉNY/JS.KÓD">
   //űrlapelemek
</form>
Code language: HTML, XML (xml)

Olyan esetekben érdemes a JavaScript ellenőrzést választanunk, amikor olyan komplex ellenőrzésekre van szükségünk, amelyet a HTML nem tesz lehetővé. Például azt ellenőrizhetjük a HTML-el, hogy a felhasználó számokat ír-e be az irányítószámhoz. Azt is ellenőrizhetjük, hogy a beírt karakterek száma pontosan négy-e. De azt már nem ellenőrizhetjük a HTML-el, hogy a beírt irányítószám valóban létezik-e, ha ezt is ellenőrizni szeretnénk, akkor már muszáj lesz JavaScript kódok írnunk.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!