validacao do formulario

index.html

@@ -15,18 +15,18 @@
     <menu>
       <ul>
         <li><a href="#">Menu</a></li>
-        <li><a href="#">Testimonials</a></li>
-        <li><a href="#">Contact</a></li>
+        <li><a href="#testimonials-sec">Testimonials</a></li>
+        <li><a href="#form-container">Contact</a></li>
       </ul>
     </menu>
   </header>
   <div class="banner">
     <img id="banner" src="./images/banner.png">
   </div>
   <main class="content">
-    <section>
+    <section id="testimonials-sec">
       <div class="container-slider">
-        <button id="prev-button"><img src="./images/icon-prev.svg"></button>
+       <!--<button id="prev-button"><img src="./images/icon-prev.svg"></button> Comentado por conta de bug no js que ainda nao corrigi-->
         <div class="container-test">
           <div class="testimonials">
             <div id="test" class="slider on">
@@ -51,32 +51,42 @@
                   <p><span>John Tarkpor</span>   |  Junior Front-end Developer</p>
               </div>
             </div>
+            <div id="test" class="slider">
+              <img id="img-testi" src="./images/image-anne.png">
+              <div class="testm">
+                <p> “ I’ve been interested in coding for a while. I couldn’t recommend this course enough. I’m now in the job of my dreams and so 
+                excited about the future. ”</p>
+              </div>
+              <div class="info">
+                <p><span>Anne Adams</span>  | Senior Back-end</p>
+              </div>
+            </div>
           </div>
         </div>
         <button id="next-button"><img src="./images/icon-next.svg"></button>
     </div> 
     </section>
     <aside>
       <div id="form-container">
-        <form>
+        <form id="form-id">
           <div class="title-form">
             <h3>Contact Us</h3>
           </div>
           <div class="full-box">
             <label for="name">First Name</label>
-            <input type="text" id="name" name="name">
+            <input type="text" id="name" name="name" data-required>
           </div>
           <div class="full-box">
             <label for="lname">Last Name</label>
-            <input type="text" id="lname" name="lname">
+            <input type="text" id="lname" name="lname" data-required>
           </div>
           <div class="full-box">
             <label for="email">E-mail</label>
-            <input type="email" id="email" name="email">
+            <input type="email" id="email" name="email" data-email-validate>
           </div>
           <div class="full-box">
             <label for="tel">Phone Number</label>
-            <input type="tel" id="tel" name="tel">
+            <input type="tel" id="tel" name="tel" data-max-length="11" placeholder="(00)-12345-6789">
           </div>
           <div class="full-box">
             <label for="coment">Coment</label>
@@ -97,6 +107,8 @@ <h3>Contact Us</h3>
     </div>
   </footer>  
 
+  <p class="error-validation template"></p>
+  <script src="./scripts/form.js"></script>
   <script src="./scripts/index.js"></script>
 </body>
 </html>

scripts/form.js

@@ -0,0 +1,117 @@
+class Validator{
+
+    constructor() {
+        this.validations = [
+            'data-max-length',
+            'data-required',
+            'data-email-validate',
+        ]
+    }
+
+    //iniciar validação de todos o campos
+    validate(form) {
+
+        //resgata validacoes
+        let currentValidations = document.querySelectorAll('form .error-validation');
+
+        if(currentValidations.length > 0){
+            this.cleanValidations(currentValidations);
+        }
+
+        // pegar os inputs
+        let inputs = form.getElementsByTagName('input');
+
+        //transform an HTMLcollection -> array
+        let inputsArray = [...inputs];
+
+        //loop dos inputs e validacao do que for encontrado
+        inputsArray.forEach(function(input){
+            //loop em todas as validacoes existentes
+            for(let i = 0; this.validations.length > i; i++) {
+                // verifica se a validacao atual existe no input
+                if(input.getAttribute(this.validations[i]) != null) {
+
+                    //limpando string para virar um método
+                    let method = this.validations[i].replace('data-', '').replace('-','');
+
+                    //valor do input
+                    let value = input.getAttribute(this.validations[i]);
+
+                    // invocar o método
+                    this[method](input, value);
+
+                }
+            }
+        }, this);
+    }
+    //verifica se um input tem numero maximo de caracteres
+    maxlength(input, maxValue) {
+
+        let inputLength = input.value.length;
+
+        let errorMessage = `Must have  ${maxValue} caracters`;
+
+        if(inputLength > maxValue) {
+            this.printMessage(input, errorMessage);
+        }
+    }
+
+    //valida emails
+    emailvalidate(input) {
+        //passando na rejex como o email é escrito
+        let re = /\S+@\S+\.\S+/;
+
+        let email = input.value;
+
+        let errorMessage = `Please, enter a valide email`;
+
+        if(!re.test(email)) {
+            this.printMessage(input, errorMessage);
+        }
+    }
+
+    // imprime a mensagem de erro na tela
+    printMessage(input, msg){
+
+        let template = document.querySelector('.error-validation').cloneNode(true);
+
+        template.textContent = msg;
+
+        let inputParent = input.parentNode;
+
+        template.classList.remove('template');
+
+        inputParent.appendChild(template);
+
+    }
+
+    //verificação de o input está sendo requerido
+    required(input){
+        let inputValue = input.value;
+
+        if (inputValue === ''){
+            let errorMessage = `Please, fill out this field`;
+
+            this.printMessage(input, errorMessage);
+        }
+    }
+
+    //limpa as validacoes da tela
+    cleanValidations(validations){
+        validations.forEach(el => el.remove());
+    }
+}
+
+let form = document.getElementById("form-id");
+let submit = document.getElementById("btn-submit");
+
+let validator =new Validator();
+
+//validations //
+
+submit.addEventListener('click',function(e) {
+
+    e.preventDefault();
+
+    validator.validate(form);
+})

scripts/index.js

@@ -15,7 +15,7 @@ function showSlider() {
 
 function nextSlider() {
     hideSlider()
-    if(currentSlide == slider.length -1){
+    if(currentSlide === slider.length -1){
         currentSlide = 0
     } else {
         currentSlide++
@@ -25,7 +25,7 @@ function nextSlider() {
 
 function prevSlider() {
     hideSlider()
-    if(currentSlide == 0) {
+    if(currentSlide === 0) {
         currentSlide = slider.lenght -1
     } else {
         currentSlide--
@@ -37,4 +37,3 @@ function prevSlider() {
 btnNext.addEventListener('click', nextSlider)
 btnPrev.addEventListener('click', prevSlider)
 
-console.log(slider)

styles/index.css

@@ -191,3 +191,4 @@ textarea[id="coment"]:focus{
 .attribution a { 
     color: hsl(228, 45%, 44%); 
 }
+