JavaScript - Form Validation


Razumijevanje provjere valjanosti na strani klijenta

Web obrasci 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 obrascu možete provjeriti na strani klijenta (tj. sistem korisnika (eng. user's system)) pomoću JavaScript-a 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 jer se provjera valjanosti 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 točno pošlo po zlu. U sljedećem dijelu detaljnije ćemo pogledati kako izvršiti provjeru JavaScript obrasca i prikladno i graciozno riješiti sve greške u ulazu.



Provjera obrasca (Form Validation) s JavaScriptom

Postupak provjere valjanosti obrasca 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 obrasca

Napravimo najprije jednostavan HTML obrazac koji ćemo provjeriti na strani klijenta pomoću JavaScript-a 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 svoj sistem.

<!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 koja sadrži kompletnu skriptu za provjeru valjanosti obrazca. Pa, kreirajmo JavaScript fajl pod nazivom "validator.js" i u nju 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-a obrazca.

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

// Definisanje funkcije za provjeru valjanosti obrasca
function validateForm() {
    // Dohvatanje vrijednosti elemenata obrasca
    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 obrasca 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 obrasca
        alert(dataPreview);
    }
};

Vrijednosti pojedinog polja obrasca 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 obrasca 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. Nadalje, gornja skripta će takođe prikazati podatke koje je korisnik unio u dijaloški okvir upozorenja radi pregleda prije slanja obrasca na web server.



Dodavanje stila za uljepšavanje obrasca

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 obrasca unesu neispravni podaci. Da biste saznali više o provjeri valjanosti na strani poslužitelja, pogledajte lekciju o provjeri valjanosti PHP obrasca.




Klikni na sliku kako bi preuzeo kompletan kod