8. eloadas

Question 1

JAVASCRIPT ŰRLAP VALIDÁLÁS

Answer 1

• Mielőtt egy HTML űrlapot beküldenénk, a JavaScript segítségével kliens oldali adatellenőrzést (validálást) végezhetünk
• Ez felhasználóbarátabb, mint a szerver oldali ellenőrzés, mert nem kell az adatokat elküldeni a szerverre, hogy visszajelzést kapjunk
• Ha az űrlap nem érvényes (hibás adatok vannak benne), akkor nem kerül beküldésre, amíg a hibák ki nem javulnak

Question 2

JavaScript és szerver oldali validálás összehasonlítása

Answer 2

A JavaScript adatellenőrzés az űrlap beküldése előtt történik
A szerver oldali alkalmazásvalidálás az űrlap beküldése után, az alkalmazásszerveren történik

Question 3

JavaScript validálás (kliens oldali)

Answer 3

✅ Gyors
✅ A böngésző végzi
✅ Használható egyszerű hibák kiszűrésére (pl. üres mező, rossz e-mail formátum)

Question 4

Szerver oldali validálás

Answer 4

✅ Akkor is működik, ha a JavaScript ki van kapcsolva
✅ Biztonságosabb: az adatokat újra ellenőrzi a szerver
✅ Komplexebb ellenőrzéseket is elvégezhet (pl. adatbázis lekérdezés, egyediség vizsgálata

Question 5

Validálás lehet

Answer 5

• Ha egy mezőt kötelezővé akarunk tenni, adjuk hozzá a required=”required” attribútumot az elemhez → Validálás kötelező mezőként
• Ha e-mail címet akarunk ellenőrizni, állítsuk a type=”email” értéket. Webcím esetén type=”url” → Validálás adattípus alapján
• Ha egy szövegmező tartalmának egy adott karaktermintát kell követnie, adjuk hozzá a pattern=”regex” attribútumot, ahol a regex egy reguláris kifejezés → Validálás minta alapján

Question 6

ONCHANGE VALIDÁLÁS

Answer 6

• Ha azt szeretnénk, hogy a böngésző azonnal ellenőrizze az egyes mezőket, akkor minden < input> mezőhöz hozzáadjuk az onchange eseményt
• Például: ha azt szeretnénk, hogy egy szövegmező csak érvényes e-mail címet fogadjon el, így adjuk hozzá:
  < input type=”text” name=”EMail” size=”20” onchange=”emailvalidation(this);”>

Question 7

<form> ONSUBMIT ESEMÉNY
</form>

Answer 7

• Az űrlapnak tartalmaznia kell egy “Submit” gombot, amit a felhasználó megnyom, amikor be akarja küldeni az adatokat
• Ekkor egy onsubmit esemény aktiválódik, és ezt az eseménykezelőt a <form> tagben kell megadni
• Az eseménykezelő (JavaScript függvény) végigellenőrzi az összes mezőt
• Ha a függvény false értéket ad vissza, az űrlap nem kerül beküldésre
• Ha true értéket ad vissza, akkor az űrlap elküldésre kerül, és lefut a form action

< form action=”feldolgozas.php” onsubmit=”return validate(this);”>

Question 8

KÖTELEZŐ MEZŐK A WEBES ŰRLAPOKON

Answer 8

• Ezek az adatok gyakran elvártak az adatbázisban, például ha nem lehetnek null értékűek (non-null)

További jó gyakorlat: egyértelműen jelölni, hogy mely mezők kötelezők
* Gyakran * (csillag) karakterrel jelölik
* Vagy kiírják, hogy „Kötelező”, vagy más stílust használnak (pl. piros szín)

Question 9

KÖTELEZŐ MEZŐK ELLENŐRZÉSE JAVASCRIPT-TEL

Answer 9

Egy szövegmező (textbox) ellenőrzése egyszerűen történhet azzal, hogy megnézzük:
text.length == 0

Egy legördülő listánál (<select>) úgy nézhetjük meg, hogy kiválasztottak-e valamit: selectedIndex > 0
* A legelső <option> elem legyen útmutató (pl. "Válassz...")</option></select>

Egy checkbox esetén ellenőrizzük, hogy
checked == true

Rádiógomboknál be kell járni a csoportot (tömböt), és meg kell nézni, van-e olyan, amelyiknél
checked == true

Question 10

HELYES ADATOK ELLENŐRZÉSE

Answer 10

Ha egy szövegmező e-mail címet kér, ellenőrizni kell, hogy a beírt szöveg valóban érvényes e-mail

Ha egy szövegmező dátumot kér, ellenőrizni kell a formátumot és érvényességet (pl. létezik-e az adott dátum)

Ha egy szövegmező irányítószámot kér, ellenőrizni kell, hogy az valóban érvényes irányítószám

Question 11

REGULÁRIS KIFEJEZÉSEK

Answer 11

Szövegek ellenőrzésére használhatók úgynevezett reguláris kifejezések (regular expressions, röviden: regex)

Ezek szabályokat (mintákat) definiálnak, és összevetik a megadott szöveggel

Question 12

HIBAÜZENETEK FINOMHANGOLÁSA

Answer 12

• Segítsük a felhasználókat a webes űrlap sikeres kitöltésében.
• Adjunk formázási útmutatást közvetlenül a mezők mellett, ahelyett, hogy csak beküldés után jelenne meg a hibaüzenet.
• A hibaüzenetek legyenek professzionálisak és segítőkészek.
• Törekedjünk arra, hogy minden mezőnél külön hibaüzenet jelenjen meg, valamint összegző szöveg egy figyelmeztető dobozban (pl. az űrlap tetején).

Question 13

A WEBES ŰRLAP TESZTELÉSE

Answer 13

Először teszteljük, hogy a kötelező mezők valóban ki legyenek töltve.

Ezután teszteljük azokat a mezőket, amelyek érvényes formátumot igényelnek, például:

• Telefonszám
• E-mail cím
• Dátumok

Győződjünk meg róla, hogy a hibaüzenetek minden esetben megfelelőek és konkrétak.