dodane povezave do regularnih izrazov

js/rezervacija.js

@@ -1,7 +1,11 @@
-// Pridobivanje HTML elementov
+// 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
@@ -19,15 +23,53 @@ function preveriIme() { // Preveri, ali sta ime in priimek pravilno vnesena.
     }
 }
 
+
+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
+    if (!vzorec.test(vrednost)) {
+        napakaTelefon.textContent = "Vnesite veljavno telefonski š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) {
+    if (imePravilno && emailPravilno && telefonPravilno) {
             //se  morem preveriti ostale vrednosti
     }
 });

rezervacija.html

@@ -73,11 +73,18 @@
                         placeholder="Neža Novak" required>
                     <span class="sporocilo_napake" id="napaka-ime"></span> <!span bo prostor kjer se bodo izpisale napake!>
                 </div>
-                E-poštni naslov
+                <label for="email">E-poštni naslov</label>
-                <input type="email" id="email" name="email" placeholder="neza.novak@primer.si" required>
+                <div class="vnos_rezervacija">
-                Telefonska številka
+                    <input type="email" id="email" name="email"
-                <input type="tel" id="telefon-st" name="telefon-st"
+                        placeholder="neza.novak@primer.si" required>
-                    placeholder="040 123 456" required> <!števila bom prirejala z js!>
+                    <span class="sporocilo_napake" id="napaka-email"></span>
+                </div>
+                <label for="telefon-st">Telefonska številka</label>
+                <div class="vnos_rezervacija">
+                    <input type="tel" id="telefon-st" name="telefon-st"
+                        placeholder="040 123 456" required>
+                    <span class="sporocilo_napake" id="napaka-telefon"></span>
+                </div>
                     Priložnost <br>
                 <div class="opcije">
                     <div class="opcije_radio">

stylesheet.css

@@ -711,6 +711,23 @@ footer p {
     color: var(--barva-besedilo);
 }
 
+/* Vnosno polje zavzame celotno širino */
+.vnos_rezervacija input {
+    width: 100%;
+}
+
+/* Sporočilo o napaki */
+.sporocilo_napake {
+    color: #c62828;
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+/* Rdeča obroba pri napačnem vnosu */
+.field_rezervacija input.napacno {
+    border: 0.15rem solid #c62828;
+}
+
 
 .opcije {
     display: flex ;