// 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"); const datum = document.querySelector("#datum-obiska"); const napakaDatum = document.querySelector("#napaka-datum"); const ura = document.querySelector("#ura-obiska"); const napakaUra = document.querySelector("#napaka-ura"); const odpiralniCas = [ [10, 22], // Nedelja [9, 22], // Ponedeljek null, // Torek - zaprto [9, 22], // Sreda [9, 22], // Četrtek [9, 23], // Petek [10, 23] // Sobota ]; 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; } } // Preveri pravilnost datuma rezervacije. function preveriDatum() { const vrednost = datum.value; //elementu doda trenutno vrednost elementa value, torej tisto kar uporabnik izbere, npr. 4.november 2026 bi bilo 2026-11-04, vrne vrednost v obliki string const izbraniDatum = new Date(vrednost + "T00:00:00"); //tukaj pa iz stringa spremenim v pobjekt date, pac uporabno za datum const danVTednu = izbraniDatum.getDay(); // s tem pa ugotovimo kater dan v tednu je to, 0-nedelja, 1-ponedeljek, 2-torek... za cel teden, da bom lahko kasneje napisala da smo v torek zaprti const danes = new Date(); // elementu danes dodam vrednost današnjega datuma danes.setHours(0, 0, 0, 0); //in nastavim čas na polnoč, vse datume primerjam ob polnoči da slučajnp to ne bi vpivalo na preverjanje ali je datum v preteklosti if (vrednost === "") { //če je vrednost prazna potem napakaDatum.textContent = "Izberite datum rezervacije."; } else if (danes > izbraniDatum) { //če je današnji datum večji oz kasnejši od izbranega potem napakaDatum.textContent = "Datum ne sme biti v preteklosti."; } else if (danVTednu === 2) { //če je izbran dan v tednu torek napakaDatum.textContent = "Ob torkih je restavracija zaprta."; } else { napakaDatum.textContent = ""; datum.classList.remove("napacno"); return true; //če je datum prvilen se funkcija konča tukaj } datum.classList.add("napacno"); return false; //zapisano na koncu da se izognemo ponavljanju, ker do tega dela pridemo samo če je datum neustrezen } // Preveri pravilnost ure rezervacije. function preveriUro() { const vrednost = ura.value; // Najprej preverimo, ali sta datum in ura izbrana. if (vrednost === "" || datum.value === "") { //dan more biti izbran ker se delavni cas od dnva do dneva spreminja napakaUra.textContent = "Izberite datum in uro rezervacije."; ura.classList.add("napacno"); return false; } // Pridobimo odpiralni čas za izbrani dan. const izbraniDatum = new Date(datum.value + "T00:00:00"); const danVTednu = izbraniDatum.getDay(); const odpiralniCasDanes = odpiralniCas[danVTednu]; //sped zelimo dobiti dan v tednu (zgornji dve vrstici) da lahko na podlagi tega izberemo delovni cas // Razdelimo izbrano uro na ure in minute. const deli = vrednost.split(":"); const samoUra = Number(deli[0]); const samoMin = Number(deli[1]); // Preverimo, ali je rezervacija vsaj eno uro v prihodnosti. const zdaj = new Date(); //to nam da cas da pripravimo mizo npr. const najmanjsiCas = zdaj.getTime() + 60 * 60 * 1000; //cas se zapisuje v milisekundah zato je za dodajo ene ure 60*60*1000 const casRezervacije = new Date(datum.value + "T" + vrednost); //zelimo vedet datu in uro rezervacije, datum.value+"T"+vrednost je pa standardni zapis datuma, new Date pa uporabljamo zato da lahko z njim racunamo if (odpiralniCasDanes === null) { napakaUra.textContent = "Ob torkih je restavracija zaprta."; } else { const odprtje = odpiralniCasDanes[0]; const zaprtje = odpiralniCasDanes[1]; const zadnjaUra = zaprtje - 1; //ne morejo se rezervirati ob zaprtju (samo zdrava pamet) if (samoUra < odprtje) { //ce je ura manjsa od odprtja napakaUra.textContent = "Restavracija ob izbrani uri še ni odprta."; } else if (samoUra > zadnjaUra || (samoUra === zadnjaUra && samoMin > 0)) { //ce je ura vecja od zadnje ure, ali pa je enaka zadnji mozni uri in so minute vecje 0 (ker lahko se ob 21.00 rezerviras mizo) napakaUra.textContent = "Rezervacija je mogoča najpozneje eno uro pred zaprtjem."; } else if (casRezervacije.getTime() < najmanjsiCas) { napakaUra.textContent = "Rezervacijo morate oddati vsaj eno uro pred obiskom."; } else { //vse je pravilno napakaUra.textContent = ""; ura.classList.remove("napacno"); return true; } } ura.classList.add("napacno"); //spet se izogibamo ponavljanju, to se zgodi vsakic ko je kaj narobe return false; } // 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); datum.addEventListener("select", preveriDatum); //tu imam select ker datum izbira ne vpisuje tako da je bolj logicno ura.addEventListener("change", preveriUro); 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(); const datumPravilno = preveriDatum(); const uraPravilno = preveriUro(); if (imePravilno && emailPravilno && telefonPravilno && datumPravilno && uraPravilno) { //se morem preveriti ostale vrednosti } });