Primenjene informacione tehnologije 3

1. Šta je validacija?

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

U prethodnoj lekciji je bilo reči o HTML5 validaciji, gde se koriste dodatni atributi unutar html tag-a. Sada nastavljamo ....

2️⃣ VALIDACIJA POMOĆU JAVASCRIPT-A

1. Zašto se koristi i JavaScript validacija?

HTML5 validacija je osnovna, ali ne pokriva sve.
JavaScript omogućava naprednu kontrolu i prilagođene poruke.

2. Sprečavanje slanja forme

Napraviti formu:

<form id="forma">
    Ime: <input type="text" id="ime"><br><br>
    Lozinka: <input type="password" id="lozinka"><br><br>
    <button type="submit">Pošalji</button>
</form>

<p id="poruka"></p>

Dodati JavaScript:

<script>
document.getElementById("forma").addEventListener("submit", function(event){

    event.preventDefault();

    let ime = document.getElementById("ime").value;
    let lozinka = document.getElementById("lozinka").value;

    if(ime === "" || lozinka === ""){
        document.getElementById("poruka").innerHTML = "Sva polja su obavezna!";
    }
    else if(lozinka.length < 6){
        document.getElementById("poruka").innerHTML = "Lozinka mora imati najmanje 6 karaktera!";
    }
    else{
        document.getElementById("poruka").innerHTML = "Uspešno poslato!";
    }

});
</script>

3. Objašnjenje

• addEventListener("submit") – reaguje na slanje forme

• event.preventDefault() – sprečava reload stranice

• .value – uzima vrednost iz polja

• .innerHTML – prikazuje poruku

📝 VEŽBE

1. Dodati proveru da email mora sadržati znak @.

2. Prikazati poruku zelenom bojom ako je unos ispravan.

3. Dodati proveru da ime mora imati najmanje 2 karaktera.