24/25.3 WEB programiranje 3

Uvod: Šta je validacija forme?

Validacija forme je proces provere podataka unetih u formu kako bi se osiguralo da su ispravni pre nego što se podaci pošalju serveru. 

To može da bude na primer: provera da li su svi obavezni podaci uneseni, provera formata podataka (npr. da li je email adresa ispravna), ograničenja na određene vrednosti (npr. da uneseni podatak bude broj u nekom određenom opsegu), .....

Validacija može da se izvrši na više načina, u zavisnosti od složenosti i potreba projekta:

• pomoću HTML atributa (osnovna validacija)
• pomoću JavaScripta (na strani klijenta)
• na strani servera
• može biti kombinovana validacija (klijentska i serverska)
• pomoću bublioteka ili framework-a
• pomoću CSS pseudo-klasa

S obzirom da se za jedan školski čas ne može ulaziti u previše detalja, u nastavku su navedena samo tri načina:

1. Validacija pomoću HTML atributa (osnovna validacija)

Neki od ugrađenih atributa su:

• required - Polje mora biti popunjeno.
• min i max - Za brojčane vrednosti.
• minlength i maxlength - Ograničenje dužine stringa.
• pattern - Regularni izrazi za naprednu validaciju.
• type - Unapred definisane validacije, npr. email, url, number, tel.
  • ... ( pogledajte ostale html form atribute na : https://www.w3schools.com/html/html_form_attributes.asp)
    

Ovo je najlakši način za validaciju jednostavnih formi. Relativno lako se koristi, ali je nedostatak što dosta zavisi od toga da li i šta web browser podržava

Primer 1: Uneti korisničko ime, email, i godinu rođenja. Koristiit html atribute za osiguravanje da je sve uneseno kako treba.

<form>
  <label for="username">Korisničko ime:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="age">Godine:</label>
  <input type="number" id="age" name="age" min="18" max="99">

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

Primer 2: Upotrebiti polje za unos email-a, ali za proveru ispravnosti unosa koristiti regularne izraze (šablon):

<input type="email" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Unesite ispravnu email adresu.">

2. Validacija na klijentskoj strani pomoću JavaScripta

Validacija na klijentskoj strani se vrši pomoću JavaScript-a pre nego što se podaci pošalju serveru.

Primer 3: Kreirati formu za unos lozinke i polje za potvrdu lozinke. Ako se lozinke ne poklapaju treba da iskoči poruka.

<form id="myForm">
  <label for="password">Lozinka:</label>
  <input type="password" id="password" name="password" required>
  
  <label for="confirmPassword">Potvrda lozinke:</label>
  <input type="password" id="confirmPassword" name="confirmPassword" required>
  
  <button type="submit">Pošalji</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    if (password !== confirmPassword) {
      alert('Lozinke se ne poklapaju!');
      event.preventDefault();    // Sprečava slanje forme
    }
else { alert('podaci su poslati');}
  });
</script>

3. Validacija pomoću CSS pseudo-klasa

Koristi se za lepši prikaz i poboljšanje korisničkog iskustva sa vizuelnim povratnim informacijama, iako ne može sama da validra podatke.  

Primer 4:  Kada se dobro unose podaci da je polje za email oivičeno zelenom bojom, a ako se krene unositi kako ne treba onda da je crvenom bojom uokvireno:

<style>
  input:valid {
    border: 2px solid green;
  }
  input:invalid {
    border: 2px solid red;
  }
</style>

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
</form>

Izbor metode kojom će da se vrši validacija zavisi od specifičnih zahteva projekta. Preporučuje se kombinovanje više metoda kako bi se obezbedila što veća sigurnost i što bolja interakcija sa korisnicima.