validacijaTelefonaFront

SkuciSe/src/main/resources/static/css/style.css

@@ -615,3 +615,28 @@ label.star:before {
 #messages td{
     width: 50px;
 }
+.slikaPozadina{
+    border-color: #dc3545;
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+    width: 100%;
+    padding: 9px 20px;
+    padding-right: 20px;
+    text-align: left;
+    border: 0;
+    border-top-color: currentcolor;
+    border-right-color: currentcolor;
+    border-bottom-color: currentcolor;
+    border-left-color: currentcolor;
+    outline: 0;
+    border-radius: 15px;
+    background-color: #fff;
+    font-size: 15px;
+    font-weight: 300;
+    -webkit-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+    margin-top: 16px;
+}
\ No newline at end of file

SkuciSe/src/main/resources/static/js/main.js

@@ -124,11 +124,11 @@ function proveriBroj(){
     const re = new RegExp('^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$');
     let val = document.getElementById("brojTelefona").value;
     if(re.test(val)) {
-        console.log("Dobar")
         return true
     }
     else {
-        console.log("Los")
+        document.getElementById("brojTelefona").classList.add("slikaPozadina");
+        document.getElementById("brojFonaProvera").style.display = "block";
         return false
     }
 }
\ No newline at end of file

SkuciSe/src/main/resources/templates/novi-oglas-form.html

@@ -168,7 +168,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="row mt-3 mb-3">
+                        <div class="row mt-3 mb-3 flex-wrap">
                             <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-between align-items-center flex-wrap">
                                 <div class="col-lg-6 col-md-6 col-sm-6">
                                     <input checked class="form-check-input" type="radio" name="flexRadioDefault"
@@ -187,7 +187,7 @@
                                     </label>
                                 </div>
                             </div>
-                            <div class="col-6 d-flex justify-content-between align-items-center flex-wrap">
+                            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 d-flex justify-content-between align-items-center flex-wrap">
                                 <div class="col-lg-4 col-md-4 col-sm-4">
                                     <input th:field="${newOglas.lift}" class="form-check-input" type="checkbox"
                                            value="">

SkuciSe/src/main/resources/templates/register.html

@@ -91,7 +91,7 @@
     </div>
 </nav>
 
-<div class="form-body d-flex justify-content-center align-items-center pozadinaSVG" style="height: 800px;">
+<div class="form-body d-flex justify-content-center align-items-center pozadinaSVG">
     <div class="row">
         <div class="form-holder">
             <div class="form-content">
@@ -100,23 +100,22 @@
                           th:action="@{/register-proccess}" enctype="multipart/form-data" onsubmit="return proveriBroj()">
                         <div class="col-md-12">
                             <input th:field="${newUser.ime}" class="form-control" type="text" name="name"
-                                   placeholder="Ime" required>
+                                   placeholder="Ime" required onkeydown="return /[a-z]/i.test(event.key)">
                             <div class="valid-feedback">Dobro ime!</div>
                             <div class="invalid-feedback">Ime ne sme biti prazno!</div>
                         </div>
 
                         <div class="col-md-12">
                             <input th:field="${newUser.prezime}" class="form-control" type="text" name="surname"
-                                   placeholder="Prezime" required>
+                                   placeholder="Prezime" required onkeydown="return /[a-z]/i.test(event.key)">
                             <div class="valid-feedback">Dobro prezime!</div>
                             <div class="invalid-feedback">Prezime ne sme biti prazno!</div>
                         </div>
 
                         <div class="col-md-12">
-                            <input th:field="${newUser.telefon}" class="form-control" type="text" name="phone"
-                                   placeholder="Broj telefona" required id="brojTelefona">
-                            <div class="valid-feedback">Dobar broj!</div>
-                            <div class="invalid-feedback">Broj telefona ne sme biti prazan!</div>
+                            <input th:field="${newUser.telefon}" type="text" name="phone"
+                                   placeholder="Broj telefona" id="brojTelefona">
+                            <div class="row ml-1" id="brojFonaProvera" style="display: none;color:#ff606e;font-size:18px;">Broj telefona nije u dobrom formatu!</div>
                         </div>
 
                         <div class="col-md-12">