Primenjene informacione tehnologije 3

1️⃣  HTML5 VALIDACIJA FORME

1. Šta je validacija?

Validacija je provera da li su podaci koje je korisnik uneo ispravni.

Primeri:

• Da li je email pravilno unet?
• Da li je lozinka dovoljno duga?
• Da li su sva obavezna polja popunjena?

HTML5 nam omogućava osnovnu validaciju čak i bez JavaScript-a, tako što se koriste dodatni atributi unuitar html tag-a.

2. Atribut required

Označava da je polje obavezno.

<input type="text" required>

Ako korisnik pokuša da pošalje prazno polje, browser će prikazati poruku.

3. Provera dužine unosa

<input type="text" minlength="3" maxlength="10">

• minlength – minimalan broj karaktera

• maxlength – maksimalan broj karaktera

4. Provera tipa unosa

Email

<input type="email" required>

Browser proverava da li postoji znak @.

Broj

<input type="number" min="1" max="100">

5. Atribut pattern

Omogućava proveru pomoću šablona (regularnog izraza).

Primer – samo slova:

<input type="text" pattern="[A-Za-z]+" required>

Primer – lozinka minimum 6 karaktera:

<input type="password" pattern=".{6,}" required>

6. Primer kompletne validirane forme

<form>

    Ime:<br>
    <input type="text" required minlength="2"><br><br>

    Email:<br>
    <input type="email" required><br><br>

    Lozinka:<br>
    <input type="password" required minlength="6"><br><br>

    Godine:<br>
    <input type="number" min="15" max="100"><br><br>

    <button type="submit">Pošalji</button>

</form>

📝 VEŽBE

• Dodati validaciju na svoju registracionu formu (sa prethodnog časa):

  1. Obezbediti da lozinka mora imati minimum 8 karaktera.

  2. Ograničiti godine između 18 i 65.