Walidacja formularza w JS

pytanie zadane 3 listopada 2020 w JavaScript przez ptomeccc Użytkownik (800 p.)
zamknięte 2 maja 2021 przez ScriptyChris

Cześć, mam problem z walidacją w JS. Na lekcji dostaliśmy zadanie, aby zrobić sprawdzenie, czy wszystkie pola zostały uzupełnione, w jednym polu mogą być tylko liczby, poprawny adres email oraz imie i nazwisko muszą zaczynać się z dużej litery. Zrobiłem sprawdzenie czy wszystkie pola są wypełnione i tu pojawia się problem. Gdy próbuję zrobić np. sprawdzenie czy email posiada @, wszystko się wysypuję i mogę przesłać formularz bez uzupełniania innych pól.

function sprawdz()
{

    document.getElementById("zamowienie").onsubmit = function()
    {
        if(imie.value == "")
        {
            blad.innerHTML = "Uzupełnij imię";
            return false;
        }
        else if (nazwisko.value == "")
        {
            blad.innerHTML = "Uzupełnij nazwisko";
            return false;
        }
        else if (ilosc.value == "")
        {
            blad.innerHTML = "Uzupełnij ilosc";
            return false;
        }
        else if (produkt.value == "")
        {
            blad.innerHTML = "Uzupełnij nazwe produktu";
            return false;
        }
        else if (email.value == "")
        {
            blad.innerHTML = "Uzupełnij email";
            return false;
        }
        else if (adres.value == "")
        {
            blad.innerHTML = "Uzupełnij adres";
            return false;
        }
        else if (regulamin.checked == false)
        {
            blad.innerHTML = "Akceptuj Regulamin";
            return false;
        }
        else{

            return true;
        }
        

    }

}
window.onload = function()
{
    sprawdz();
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Obiektowy model dokumentu</title>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="blad" id="blad"></div>
<div class="content">
<h3>Formularz zamówienia</h3>
<form action="zamowienie.html" method="get" name="zamówienie" id="zamowienie">
    <ul>
    	<li>
        <label>Nazwa produktu :</label>
        <div><input name="produkt" type="text" id="produkt"/></div>
        </li>
        <li>
        <label>Ilość :</label>
        <div><input name="ilosc" type="text" id="ilosc"/></div>
        </li>
        <li>
        <label>Imię :</label>
        <div><input name="imie" type="text" id="imie"/></div>
        </li>
        <li>
        <label>Nazwisko :</label>
        <div><input name="nazwisko" type="text" id="nazwisko"/></div>
        </li>
        <li>
        <label>Email :</label>
        <div><input name="email" type="text" id="email"/></div>
        </li>
        <li>
        <label>Adres :</label>
        <div><textarea name="adres" cols="12" rows="4" id="adres"></textarea></div>
        </li>
        <li>
        <label>Akceptuję regulamin :</label>
        <div><input name="regulamin" type="checkbox" id="regulamin"/></div>
        </li>
    </ul>
    <div class="wyslij"><input name="wyslij" type="submit" value="Wyślij" id="wyslij"/></div>
</form>
</div>
</body>
</html>

Jak zrobić, aby również te warunki, które podałem działały?

komentarz zamknięcia: Temat wyczerpany

1	komentarz 3 listopada 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.) Tak btw masz specjalne pole do maili input/email

komentarz 3 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Gdy próbuję zrobić np. sprawdzenie czy email posiada @, wszystko się wysypuję

W którym miejscu próbujesz to sprawdzić? I co konkretnie się wysypuje?

Czemu na inputach z [name] ilosc i email nie użyjesz odpowiednich atrybutów type: number i email? Mają wbudowaną podstawową walidację, którą można konfigurować.

komentarz 3 listopada 2020 przez ptomeccc Użytkownik (800 p.)

Nie używałem takiej walidacji, bo plik html dostałem gotowy od nauczyciela, ale dzięki za zwrócenie uwagi. Dodając kolejnego else if, który ma sprawdzać czy pole ilość jest liczbą, po wszystko pozostałe działa, ale dalej można wpisywać inne wartości niż liczbowe, albo nic nie działa i bez wpisywania danych można wysłać formularz

komentarz 3 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż proszę ten kod z dodatkowym else...if, którego nie widać w pytaniu.

komentarz 3 listopada 2020 przez tixar17 Nowicjusz (120 p.)

Jemu chodzi o to że w tych else if ma się zawierać właśnie kod robiący to co on wymienił że np. jak ma tam to imię czy no jakieś inne dane ma mu sprawdzać do tego czy spełniono warunki takie jak np. duża litera bądź e-mail z @. A nie że jest jakiś dodatkowy else if źle zrozumiałeś

komentarz 4 listopada 2020 przez ptomeccc Użytkownik (800 p.)

Dokładnie o to mi chodzi

2 odpowiedzi

odpowiedź 4 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Napisałeś:

Gdy próbuję zrobić np. sprawdzenie czy email posiada @, wszystko się wysypuję

, więc zapytałem w jaki sposób sprawdzałeś, czy email posiada @ (bo tego nie widać w kodzie) i co konkretnie wtedy nie działa?

Jeśli chcesz sprawdzić, czy wartość emaila zawiera znak "@", to użyj np. metody String.prototype.includes, albo przy bardziej szczegółowym sprawdzaniu - RegExpa. Jednak mógłbyś tego uniknąć używając inputa ze wspomnianym type="email, który udostępnia m.in. atrybut pattern i tam możesz napisać wyrażenie regularne, na podstawie którego przeglądarka sprawdzi, czy wartość w inpucie (w tym przypadku email) go spełnia czy nie. Zresztą już sam <input type="email"> posiada natywną walidację, która sprawdza m.in., czy email zawiera znak "@" - jeśli nie, to przeglądarka zablokuje wysłanie formularza i może pokazać użytkownikowi ostrzeżenie.

odpowiedź 5 listopada 2020 przez VBService Ekspert (255,800 p.)

Przy takim zapisie bloków if, elseif, po naciśnięciu na przycisk "wyślij" wykonywany jest tylko pierwszy napotkany blok, który spełnia warunek (walidacja całego formularza przebiega po kilku krotnej próbie wysłania formularza - naciśnięcia "wyślij" w zależności od tego ile pól użytkownik wypełnił nieprawidłowo)

if( . . . )
{
    . . .
}
else if ( . . . )
{
    . . .
}
else if ( . . .) itd.

proponuję walidację wszystkich pól, już przy pierwszej próbie wysłania formularza. Codepen


<div class="blad" id="blad"></div>
<div class="content">
<h3>Formularz zamówienia</h3>
<form action="zamowienie.html" method="get" name="zamówienie" id="zamowienie">
    <ul>
        <li>
        <label>Nazwa produktu :</label>
        <div><input name="produkt" type="text" id="produkt"/></div>
        </li>
        <li>
        <label>Ilość :</label>
        <div><input name="ilosc" type="text" id="ilosc"/></div>
        </li>
        <li>
        <label>Imię :</label>
        <div><input name="imie" type="text" id="imie"/></div>
        </li>
        <li>
        <label>Nazwisko :</label>
        <div><input name="nazwisko" type="text" id="nazwisko"/></div>
        </li>
        <li>
        <label>Email :</label>
        <div><input name="email" type="text" id="email"/></div>
        </li>
        <li>
        <label>Adres :</label>
        <div><textarea name="adres" cols="12" rows="4" id="adres"></textarea></div>
        </li>
        <li>
        <label>Akceptuję regulamin :</label>
        <div><input name="regulamin" type="checkbox" id="regulamin"/></div>
        </li>
    </ul>
    <div class="wyslij"><input name="wyslij" type="submit" value="Wyślij" id="wyslij"/></div>
</form>
</div>

function sprawdz()
{
  document.getElementById("zamowienie").onsubmit = function()
    {
      let form_error = [];
      
      if (produkt.value == "") {
          form_error.push("Uzupełnij nazwe produktu");
      }
    
      if (ilosc.value == "") {
          form_error.push("Uzupełnij ilość");
      } else {
          if (parseFloat(ilosc.value) != ilosc.value) {
              form_error.push("Wartość w polu ilość powinna być liczbą");
          } else {
              if (ilosc.value <= 0) {
                  form_error.push("Wartość w polu ilość powinna być większa od zera");
              }
          }
      }
    
      if (imie.value == "") {
          form_error.push("Uzupełnij imię");
      } else {
          if (imie.value.charAt(0).toUpperCase() != imie.value.charAt(0)) {
              form_error.push("Imię powinno zaczynać się od dużej litery");
          }
      }
    
      if (nazwisko.value == "") {
          form_error.push("Uzupełnij nazwisko");
      } else {
         if (nazwisko.value.charAt(0).toUpperCase() != nazwisko.value.charAt(0)) {
              form_error.push("Nazwisko powinno zaczynać się od dużej litery");
          }        
      }
    
      if (email.value == "") {
          form_error.push("Uzupełnij email");
      } else {
          if (!email.value.includes('@')) {
              form_error.push("Nieprawidłowy format email");
          }
      }
    
      if (adres.value == "") {
          form_error.push("Uzupełnij adres");
      }
      if (regulamin.checked == false) {
          form_error.push("Zaznacz akceptację regulaminu");
      }
         
      if (form_error.length > 0) {
          blad.innerHTML = form_error.join("<br>");
          return false;
      } else {
          return true;
      }
    }
 
}

window.onload = function()
{
    sprawdz();
}

W przypadku np.: sprawdzenia adresu email, lepiej się sprawdza, input type="email" i (lub) regexp, ale nie napisałeś czy w zadaniu można ich użyć. Analogicznie dla liczb (input type="number").