Add: Front-end validator (Professional AdminArea) #142

views/professionals/admin.ejs

@@ -35,26 +35,54 @@
         </section>
         <section class="pap-form__name">
           <label class="pap-name__inputs" for="name">Nome</label>
-          <input class="pap-form__name-input" type="text" name="name" id="name" value="<%= professional.name %>" />
+          <input class="pap-form__name-input" type="text" name="name" id="name" value="<%= professional.name %>"
+          minlength="6" 
+          maxlength="150" 
+          oninvalid="this.setCustomValidity('Insira um nome válido com pelo menos 6 caracteres')"
+          onchange="try{setCustomValidity('')}catch(e){}"
+          oninput="setCustomValidity('')"
+          required/>
         </section>
         <section class="pap-form__email">
           <label class="pap-name__inputs" for="email">Email</label>
           <input class="pap-form__email-input" type="email" name="email" id="email_prof"
-            value="<%= professional.email %>" />
+            value="<%= professional.email %>"
+            maxlength="150" 
+            oninvalid="this.setCustomValidity('Insira um e-mail válido')"
+            onchange="try{setCustomValidity('')}catch(e){}"
+            oninput="setCustomValidity('')"
+            required/>
         </section>
         <section class="pap-form__phone">
           <label class="pap-name__inputs" for="phone">Celular</label>
-          <input class="pap-form__phone-input" type="tel" name="mobile" id="phone" value="<%= professional.mobile %>" />
+          <input class="pap-form__phone-input" type="tel" name="mobile" id="phone" value="<%= professional.mobile %>" 
+            pattern="\([0-9]{2}\) [0-9]{5}-[0-9]{4}$" 
+            maxlength="20" 
+            oninvalid="this.setCustomValidity('Insira um número válido')"
+            onchange="try{setCustomValidity('')}catch(e){}"
+            oninput="setCustomValidity('')"
+            required/>
         </section>
         <section class="pap-form__zip-code">
           <label class="pap-name__inputs" for="zip-code">CEP</label>
-          <input class="pap-form__zip-code-input" type="text" name="zipcode" id="zipccode"
-            value="<%= professional.zipcode %>" />
+          <input class="pap-form__zip-code-input" type="text" name="zipcode" id="zipcode"
+            value="<%= professional.zipcode %>"
+            pattern="\d{5}-\d{3}"
+            maxlength="10" 
+            oninvalid="this.setCustomValidity('Insira um CEP válido')"
+            onchange="try{setCustomValidity('')}catch(e){}"
+            oninput="setCustomValidity('')"
+            required/>
         </section>
         <section class="pap-form__address">
           <label class="pap-name__inputs" for="address">Endereço</label>
           <input class="pap-form__address-input" type="text" name="address" id="address"
-            value="<%= professional.address %>" />
+            value="<%= professional.address %>"
+            maxlength="150" 
+            oninvalid="this.setCustomValidity('Insira um endereço válido')"
+            onchange="try{setCustomValidity('')}catch(e){}"
+            oninput="setCustomValidity('')"
+            required/>
         </section>
         <section class="pap-form__district">
           <label class="pap-name__inputs" for="district">Bairro</label>
@@ -354,9 +382,36 @@
 
 
 
-
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
-     window.onload = function(){
+    // masks
+    $(document).ready(function(){
+      $('#phone').mask('(00) 00000-0000');
+      $('#zipcode').mask('00000-000');
+    });
+
+    window.onload = function(){
+      // create axios instance
+      let api = axios.create({
+        baseURL: 'https://viacep.com.br/ws/',
+        timeout: 3000
+      });
+
+      // fill out address field based on zipcode
+      let zipcode = document.getElementById('zipcode');
+      let address = document.getElementById('address');
+
+      // viacep API
+      zipcode.addEventListener('keyup', function(){
+        if(zipcode.value.length === 9){
+          api.get(`${zipcode.value.replace('-','')}/json`).then(function(res) {
+            address.value = `${res.data.logradouro}, `;
+          });
+        }
+      });
+
       let addSlots = [];
       let availableSlots = document.getElementById("availableSlots");
       let timeSlots = document.getElementsByClassName('pap-calendar__time--available');