JavaScript - Form Validation

Razumijevanje provjere valjanosti na strani klijenta

Web obrazci postali su važan dio web aplikacija. Često se koristi za prikupljanje korisničkih podataka poput imena, adrese e-pošte, lokacije, starosti itd. Sasvim je moguće da neki korisnik možda neće unijeti one podatke koje ste očekivali. Dakle, da biste uštedjeli propusnost i izbjegli nepotrebno opterećenje resursa poslužitelja, podatke o obrazcu možete provjeriti na strani klijenta (tj. sistem korisnika (eng. user's system)) pomoću JavaScript prije nego što ih prosljedite na web server za dalju obradu.

Provjera na strani klijenta takođe je korisna u stvaranju boljeg korisničkog iskustva, jer je brža i provjera valjanosti se odvija u korisnikovom web pretraživaču, dok se provjera valjanosti na strani poslužitelja događa na serveru, koji zahtijeva da korisnikov unos prvo pošalje serveru prije nego što se dogodi provjera valjanosti, takođe korisnik mora pričekati odgovor poslužitelja da zna što je tačno pošlo po zlu. U sljedećem dijelu detaljnije ćemo pogledati kako izvršiti provjeru JavaScript obrazca i prikladno i graciozno riješiti sve greške u ulazu.


Provjera obrazca (Form Validation) s JavaScriptom

Postupak provjere valjanosti obrazca obično se sastoji od dva dijela - provjere valjanosti potrebnih polja koja se izvodi kako bi se osiguralo da su popunjena sva obavezna polja i provjere valjanosti formata podataka koja se provodi kako bi se osiguralo da vrsta i format podataka unesenih u obrazac bude valjan. Pa, krenimo odmah i pogledajte kako ovo zapravo funkcioniše.


Izrada HTML obrazca

Napravimo najprije jednostavan HTML obrazac koji ćemo provjeriti na strani klijenta pomoću JavaScript kada korisnik klikne na dugme za slanje. Pa, kreirajmo HTML fajl pod nazivom "application-form.html" i u njega smjestimo sljedeći kod, a zatim ga spremimo negdje na računar. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jednostavna HTML Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php" method="post">
    <h2>Aplikacijska forma</h2>
    <div class="row">
        <label>Puno ime</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="row">
        <label>Email adresa</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="row">
        <label>Broj telefona</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="row">
        <label>Zemlja</label>
        <select name="country">
            <option>Odaberi</option>
            <option>Bosna i Hercegovina</option>
            <option>Srbija</option>
            <option>Hrvatska</option>
            <option>Slovenija</option>
        </select> 
        <div class="error" id="countryErr"></div>
    </div>
    <div class="row">
        <label>Pol</label>
        <div class="form-inline">
            <label><input type="radio" name="gender" value="male"> Muško</label>
            <label><input type="radio" name="gender" value="female"> Žensko</label> 
        </div>
        <div class="error" id="genderErr"></div>
    </div>
    <div class="row">
        <label>Hobi<i>(Optional)</i></label>
        <div class="form-inline">
            <label><input type="checkbox" name="hobbies[]" value="sports"> Sport</label>
            <label><input type="checkbox" name="hobbies[]" value="movies">Filmovi</label>
            <label><input type="checkbox" name="hobbies[]" value="music"> Muzika</label>  
        </div>
    </div>        
    <div class="row">
        <input type="submit" value="Pošalji">
    </div>
</form>
</body>
</html>

Izrada skripte za provjeru obrazca

Sada ćemo stvoriti JavaScript fajl koji sadrži kompletnu skriptu za provjeru valjanosti obrazca. Kreirajmo JavaScript fajl pod nazivom "validator.js" i u njuga smjestimo sljedeći kod, a zatim ga spremimo na isto mjesto na kojem ste spremili prethodni HTML fajl. Prođite kroz svaki red sljedećeg primjera koda da biste razumjeli kako funkcioniše provjera valjanosti JavaScript obrazca. 

// Definisanje funkcije za prikaz poruke o grešci
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

// Definisanje funkcije za provjeru valjanosti obrazca
function validateForm() {
    // Dohvatanje vrijednosti elemenata obrazca
    var name = document.contactForm.name.value;
    var email = document.contactForm.email.value;
    var mobile = document.contactForm.mobile.value;
    var country = document.contactForm.country.value;
    var gender = document.contactForm.gender.value;
    var hobbies = [];
    var checkboxes = document.getElementsByName("hobbies[]");
    for(var i=0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            // Popunite niz hobija odabranim vrijednostima
            hobbies.push(checkboxes[i].value);
        }
    }
    
	// Definisanje varijabli greške sa zadanom vrijednošću
    var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
    
    // Potvrda imena
    if(name == "") {
        printError("nameErr", "Unesite svoje ime");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Molim Vas unesite ispravno ime");
        } else {
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    // Potvrda email adrese
    if(email == "") {
        printError("emailErr", "Unesite svoju adresu e-pošte");
    } else {
        // Regularni izraz za osnovnu provjeru valjanosti e-pošte
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Molimo Vas da unesete ispravnu email adresu");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Potvrda broja telefona
    if(mobile == "") {
        printError("mobileErr", "Unesite svoj broj telefona");
    } else {
        var regex = /^[1-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Unesite važeći broj od 10 cifara");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
        }
    }
    
    // Potvrda zemlje
    if(country == "Select") {
        printError("countryErr", "Odaberite svoju zemlju");
    } else {
        printError("countryErr", "");
        countryErr = false;
    }
    
    // Potvrda pola
    if(gender == "") {
        printError("genderErr", "Odaberite svoj pol");
    } else {
        printError("genderErr", "");
        genderErr = false;
    }
    
    // Sprečite slanje obrazca ako postoje greške
    if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
       return false;
    } else {
        // Stvaranje niza od ulaznih podataka za pregled
        var dataPreview = "Upisali ste sljedeće podatke: \n" +
                          "Ime: " + name + "\n" +
                          "Email adresa: " + email + "\n" +
                          "Broj telefona: " + mobile + "\n" +
                          "Zemlja: " + country + "\n" +
                          "Pol: " + gender + "\n";
        if(hobbies.length) {
            dataPreview += "Hobbies: " + hobbies.join(", ");
        }
        // Prikažite ulazne podatke u dijaloškom okviru prije slanja obrazca
        alert(dataPreview);
    }
};

Vrijednosti pojedinog polja obrazca može se pristupiti i dohvatiti pomoću sintakse document.formName.fieldName.value ili document.getElementsByName(name).value. Ali, da biste dobili vrijednosti iz polja obrazca koje podržava višestruke izbore, poput grupe potvrdnih okvira, trebate koristiti izjavu petlje kao što je prikazano u gornjem primjeru. Takođe, da bismo provjerili da li je format ulaznih podataka ispravan ili ne, koristili smo regularne izraze (regular expressions). To je jedna od najučinkovitijih tehnika za provjeru valjanosti korisničkih unosa. Gornja skripta će takođe prikazati podatke koje je korisnik unio u dijaloški okvir upozorenja radi pregleda prije slanja obrazca na web server.


Dodavanje stila za uljepšavanje obrazca

Na kraju, kreirajte datoteku pod nazivom "style.css" i u nju smjestite sljedeći kod, a zatim ga takođe spremite na isto mjesto na kojem ste spremili prethodne dvije datoteke. Ovo su stilska pravila koja uljepšavaju našu formu. 

body {
    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}

To je sve, sada otvorite datoteku "application-form.html" u web pretraživaču i pokušajte popuniti neke podatke i vidjeti kako skripta reaguje kada se u polje obrazca unesu neispravni podaci. Da biste saznali više o provjeri valjanosti na strani poslužitelja, pogledajte lekciju o provjeri valjanosti PHP obrazca.

Preuzmi kompletan kod sa sljedeg LINKA