Walidacja formularza

Question

// pobieram wartości pól z formularza
      let name = document.querySelector('.name');
      let surname = document.querySelector('.surname');
      let email = document.querySelector('.email');
      let text = document.querySelector('.text');
      let btn = document.querySelector('.confirm');
      
      //sprawdzam dane
      btn.addEventListener("click", function(){
        let getLengthOfName = name.value.length;
        let getLengthOfSurname = surname.value.length;
        let getLengthOfEmail = email.value.length;
        let getLengthOfText = text.value.length;
          
          //imie i nazwisko z duzych liter
          name = name.charAt(0).toUpperCase() + name.slice(1);
          surname = surname.charAt(0).toUpperCase() + surname.slice(1);
        
          //sprawdzam poprawnosc danych podanych przez usera
          function checkForm(a,b,c,d){
              if(a < 3) alert('Twoje imię musi zawierać minimum 3 znaki');
              if(b < 3) alert('Twoje nazwisko musi zawierac minimum 3 znaki');
              if(c < 10 || getLengthOfEmail.indexOf('@') < -1) alert('Podałeś niepoprawny adres e-mail');
              if(d < 10) alert('Wiadomość musi zawierać minimum 10 znaków');
          }
          //wywołanie funkcji
          checkForm(getLengthOfName, getLengthOfSurname, getLengthOfEmail, getLengthOfText);
      });

Dostaje dziwny error w postaci: Uncaught TypeError: name.charAt is not a function
    at HTMLButtonElement.<anonymous>, twierdzi że nie jest funkcja? Niby dlaczego skoro to jest metoda(funkcja) wykonywana na stringu?

Answer 1

Niby dlaczego skoro to jest metoda(funkcja) wykonywana na stringu?

Dokładnie na stringu. I o ile się nie mylę, to w momencie wywołania tej metody, nie wywołujesz jej na łańcuchu znaków, a tagu HTML, który dostajesz z querySelectora. 

name = name.charAt(0).toUpperCase() + name.slice(1);

// trzeba najpierw wyciągnąć wartość

name = name.value.charAt(0).toUpperCase() + name.value.slice(1);