Walidacja formularzy: HTML5 i JavaScript

<form id="pizza">
  <p><label for="imie">Imię:</label> <input id="imie" required minlength="2" maxlength="30"></p>
  <p><label for="tel">Telefon (9 cyfr):</label> <input id="tel" pattern="[0-9]{9}" required inputmode="numeric"></p>
  <p><label for="ile">Liczba sztuk:</label> <input id="ile" type="number" min="1" max="10" value="1" required></p>
  <p><label for="rozmiar">Rozmiar:</label>
    <select id="rozmiar" required>
      <option value="">– wybierz –</option>
      <option value="s">mała</option>
      <option value="m">średnia</option>
      <option value="l">duża</option>
    </select></p>
  <p><label><input type="checkbox" required> Zgadzam się na kontakt telefoniczny</label></p>
  <button type="submit">Zamów</button>
</form>
<p id="wynik"></p>

input:user-invalid, select:user-invalid { border: 2px solid Crimson; }
input[type=number] { width: 60px; }

document.getElementById('pizza').addEventListener('submit', (e) => {
  e.preventDefault(); // walidacja HTML5 już przeszła, bo submit w ogóle zaszedł
  document.getElementById('wynik').textContent = 'Zamówienie przyjęte';
});

<form id="rejestracja" novalidate>
  <p><label for="login">Login:</label> <input id="login"></p>
  <p><label for="email">E-mail:</label> <input id="email"></p>
  <p><label for="haslo">Hasło:</label> <input id="haslo" type="password"></p>
  <p><label for="haslo2">Powtórz hasło:</label> <input id="haslo2" type="password"></p>
  <p><label for="wiek">Wiek:</label> <input id="wiek" type="number"></p>
  <button type="submit">Zarejestruj</button>
</form>
<p id="komunikat" aria-live="polite"></p>

input[type=number] { width: 60px; }

const komunikat = document.getElementById('komunikat');

function blad(pole, tekst) {
  komunikat.textContent = tekst;
  komunikat.style.color = 'red';
  pole.focus();                       // użytkownik od razu trafia do błędnego pola
}

document.getElementById('rejestracja').addEventListener('submit', (e) => {
  e.preventDefault();

  const loginPole = document.getElementById('login');
  const emailPole = document.getElementById('email');
  const hasloPole = document.getElementById('haslo');
  const haslo2Pole = document.getElementById('haslo2');
  const wiekPole = document.getElementById('wiek');

  const login = loginPole.value.trim();
  const email = emailPole.value.trim();
  const wiek = parseInt(wiekPole.value);

  if (login.length < 4 || login.length > 12) return blad(loginPole, 'Login musi mieć od 4 do 12 znaków.');

  const malpa = email.indexOf('@');
  const kropkaPoMalpie = email.indexOf('.', malpa) > malpa; // kropka ZA znakiem @
  if (malpa < 1 || !kropkaPoMalpie) return blad(emailPole, 'E-mail musi zawierać znak @ i kropkę po nim.');

  if (hasloPole.value.length < 8) return blad(hasloPole, 'Hasło musi mieć co najmniej 8 znaków.');
  if (hasloPole.value !== haslo2Pole.value) return blad(haslo2Pole, 'Hasła nie są identyczne.');
  if (isNaN(wiek) || wiek < 16) return blad(wiekPole, 'Wiek musi być liczbą co najmniej 16.');

  komunikat.textContent = 'Konto ' + login.toUpperCase() + ' utworzone.';
  komunikat.style.color = 'green';
});

<form id="produkt" novalidate>
  <p><label for="nazwa">Nazwa:</label> <input id="nazwa" aria-describedby="nazwa-info">
     <span id="nazwa-info" class="info" aria-live="polite"></span></p>
  <p><label for="cena">Cena:</label> <input id="cena" aria-describedby="cena-info">
     <span id="cena-info" class="info" aria-live="polite"></span></p>
  <p><label for="ilosc">Ilość:</label> <input id="ilosc" aria-describedby="ilosc-info">
     <span id="ilosc-info" class="info" aria-live="polite"></span></p>
  <button type="submit" id="dodaj" disabled>Dodaj</button>
</form>
<p id="wynik"></p>

.info { font-size: 13px; margin-left: 8px; color: Crimson; }
input[aria-invalid="true"] { border: 2px solid Crimson; }
input[aria-invalid="false"] { border: 2px solid SeaGreen; }

const poprawne = { nazwa: false, cena: false, ilosc: false }; // stan każdego pola
const dodaj = document.getElementById('dodaj');

// reguły: funkcja zwraca pusty napis (OK) albo tekst błędu
const reguly = {
  nazwa: (w) => (w.trim().length >= 3 && w.trim().length <= 40 ? '' : 'Od 3 do 40 znaków.'),
  cena: (w) => (/^[0-9]+([.,][0-9]{1,2})?$/.test(w.trim()) && parseFloat(w.replace(',', '.')) > 0
    ? '' : 'Liczba większa od 0, maks. 2 miejsca po przecinku.'),
  ilosc: (w) => (/^[0-9]+$/.test(w.trim()) && parseInt(w) >= 1 && parseInt(w) <= 999
    ? '' : 'Liczba całkowita od 1 do 999.'),
};

function sprawdzPole(id) {
  const pole = document.getElementById(id);
  const blad = reguly[id](pole.value);
  document.getElementById(id + '-info').textContent = blad;
  pole.setAttribute('aria-invalid', blad !== '');
  poprawne[id] = blad === '';
  dodaj.disabled = !(poprawne.nazwa && poprawne.cena && poprawne.ilosc); // wszystkie trzy
}

for (const id of ['nazwa', 'cena', 'ilosc']) {
  document.getElementById(id).addEventListener('input', () => sprawdzPole(id));
}

document.getElementById('produkt').addEventListener('submit', (e) => {
  e.preventDefault();
  const nazwa = document.getElementById('nazwa').value.trim();
  const cena = parseFloat(document.getElementById('cena').value.replace(',', '.'));
  const ilosc = parseInt(document.getElementById('ilosc').value);
  const wartosc = (cena * ilosc).toFixed(2);
  document.getElementById('wynik').textContent =
    'Dodano: ' + nazwa + ', ' + ilosc + ' szt. po ' + cena.toFixed(2) + ' zł = ' + wartosc + ' zł';
});

<table>
  <tr><td>Imię:</td><td><input type="text" id="imie"></td></tr>
  <tr><td>Nazwisko:</td><td><input type="text" id="nazwisko"></td></tr>
  <tr><td>Opis usterki:</td><td><textarea id="opis" rows="2"></textarea></td></tr>
  <tr><td colspan="2"><input type="checkbox" id="regulamin"> Zapoznałem się z regulaminem serwisu</td></tr>
  <tr><td colspan="2"><button type="button" onclick="wyslijZgloszenie()">Prześlij</button></td></tr>
</table>
<hr>
<p id="komunikat"></p>

function wyslijZgloszenie() {
  const imie = document.getElementById('imie').value;
  const nazwisko = document.getElementById('nazwisko').value;
  const opis = document.getElementById('opis').value;
  const regulaminZaznaczony = document.getElementById('regulamin').checked;
  const komunikat = document.getElementById('komunikat');

  if (!regulaminZaznaczony) {
    komunikat.innerHTML = 'Musisz zaakceptować regulamin serwisu';
    komunikat.style.color = 'red';
  } else {
    const imieNazwisko = (imie + ' ' + nazwisko).toUpperCase();
    komunikat.innerHTML = imieNazwisko + '<br>Opis usterki:<br>' + opis; // innerHTML, bo <br>
    komunikat.style.color = 'Navy';
  }
}