75 lines
3.6 KiB
JavaScript
75 lines
3.6 KiB
JavaScript
// Pridobivanje HTML elementov querySelector izbere prvi element s tem classom ali id-jem
|
|
const obrazec = document.querySelector("#obrazec_rezervacija");
|
|
const ime = document.querySelector("#ime-priimek");
|
|
const napakaIme = document.querySelector("#napaka-ime");
|
|
const email = document.querySelector("#email");
|
|
const napakaEmail = document.querySelector("#napaka-email");
|
|
const telefon = document.querySelector("#telefon-st");
|
|
const napakaTelefon = document.querySelector("#napaka-telefon");
|
|
|
|
function preveriIme() { // Preveri, ali sta ime in priimek pravilno vnesena.
|
|
const vrednost = ime.value.trim(); //odstrani presledke na zacetku in koncu
|
|
const besede = vrednost.split(/\s+/); //razreze ime pri presledkih da dobimo tabelo (array)
|
|
|
|
if (besede.length !== 2 || besede[0].length < 2 || besede[1].length < 2) { //ce tabela nima dveh elementov, ali ima vsak element vsaj dve crki
|
|
napakaIme.textContent = "Vnesite ime in priimek, vsak naj vsebuje vsaj dve črki."; //ce je if true izpise napako
|
|
ime.classList.add("napacno"); //v tem primeru id-ju ime-priimek doda napacno
|
|
return false; //in nam vrne kot rezultat funkcije false
|
|
}
|
|
else {
|
|
napakaIme.textContent = ""; //ce ni napak se span ne izpise
|
|
ime.classList.remove("napacno"); //odstrani se napacno pri id ime-priimek
|
|
return true; //vrne funkcija true
|
|
}
|
|
}
|
|
|
|
|
|
function preveriEmail() {
|
|
const vrednost = email.value.trim(); //spet odstranim presledke na zacetku in koncu
|
|
const vzorec = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; //definiramo kako mora izgledati mail; ^ pomeni zacetek besetila, [^\s@]- pomeni da je to besedilo 1 ali vec znakov ki niso @ ali presledek, @[^\s@]- zahteva obvezno @ in za tem znakom vsaj 1 znak ki ni presledek ali @, \. - obvezna pika, za piko spet besedilo ki ni oresledek ali @, $ pomeni konec besedila
|
|
// ce nek eklement ustreza vzorcu, vzprec=true, drugace pa false, https://www.w3schools.com/js/js_regexp.asp
|
|
if (!vzorec.test(vrednost)) { //ce je vrednost vzorca NE true= torej false
|
|
napakaEmail.textContent = "Vnesite veljaven e-poštni naslov."; //izpise se span
|
|
email.classList.add("napacno");
|
|
return(false);
|
|
}
|
|
else {
|
|
napakaEmail.textContent = "";
|
|
email.classList.remove("napacno");
|
|
return(true);
|
|
}
|
|
}
|
|
|
|
function preveriTelefon (){
|
|
const vrednost = telefon.value.trim();
|
|
const vzorec = /^0\d{2} ?\d{3} ?\d{3}$/; //https://www.w3schools.com/js/js_regexp.asp, spet ^pomeni zacetek besedila, obvezno 0, \d{2} za ničko obvezno dve stevili (d- digit), ?- neobvezen presledek, \d{3} 3 stevila, $ zakljucek besedila
|
|
if (!vzorec.test(vrednost)) {
|
|
napakaTelefon.textContent = "Vnesite veljavno telefonsko številko.";
|
|
telefon.classList.add("napacno");
|
|
return false;
|
|
}
|
|
|
|
else {
|
|
napakaTelefon.textContent = "";
|
|
telefon.classList.remove("napacno");
|
|
return true;
|
|
}
|
|
}
|
|
|
|
|
|
// Preverjanje med tipkanjem
|
|
ime.addEventListener("input", preveriIme); //funkcija se opravi ko zacnemo pisati v ime, se zacne izvajati funkcija
|
|
email.addEventListener("input", preveriEmail);
|
|
telefon.addEventListener("input", preveriTelefon);
|
|
|
|
obrazec.addEventListener("submit", function(event) { //ko oddamo funkcijo se izvede preverjanje
|
|
event.preventDefault(); //preprecimo default preverjsnje ob submitu
|
|
|
|
const imePravilno = preveriIme(); //elementu imePravilno dodamo vrednost true/false
|
|
const emailPravilno = preveriEmail();
|
|
const telefonPravilno = preveriTelefon();
|
|
|
|
if (imePravilno && emailPravilno && telefonPravilno) {
|
|
//se morem preveriti ostale vrednosti
|
|
}
|
|
}); |