Walidacja krok 2: reguły w tablicy

Walidacja formularzy: HTML i JavaScript - JavaScript na stronach WWW (HTML/CSS/JS)

Refaktoryzacja: reguły to dane. Każda ma pole, test i komunikat, a jedna pętla sprawdza wszystkie, czyści i wypisuje komunikaty (pokazuje pierwszy błąd każdego pola). Nowa reguła to jedna linia w tablicy `RULES`. Zachowanie strony jest takie samo jak w kroku 1.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Reguły</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }

    input:invalid { border-color: #dc2626; }
    .error { color: #dc2626; font-size: 0.9em; }
    input.error { border: 2px solid #dc2626; color: inherit; }
  </style>
</head>
<body>
  <form id="signup" novalidate>
    <p><label>Login: <input id="login" required minlength="3" maxlength="12"></label> <span class="error" id="login-error"></span></p>
    <p><label>E-mail: <input id="email" type="email" required></label> <span class="error" id="email-error"></span></p>
    <p><label>Wiek: <input id="age" type="number" required min="10" max="99"></label> <span class="error" id="age-error"></span></p>
    <button>Załóż konto</button>
  </form>
  <p id="result"></p>
  <script>
    const RULES = [
      { field: 'login', test: v => v !== '', message: 'Podaj login' },
      { field: 'login', test: v => v.length >= 3, message: 'Login: co najmniej 3 znaki' },
      { field: 'email', test: v => v.includes('@'), message: 'Adres musi mieć @' },
      { field: 'age', test: v => Number(v) >= 10 && Number(v) <= 99, message: 'Wiek od 10 do 99' },
    ];

    function validate(form) {
      const errors = {};
      for (const rule of RULES) {
        const value = form.querySelector('#' + rule.field).value.trim();
        if (!(rule.field in errors) && !rule.test(value)) errors[rule.field] = rule.message;
      }
      return errors;
    }

    const form = document.getElementById('signup');
    form.addEventListener('submit', e => {
      e.preventDefault();
      const errors = validate(form);
      for (const span of form.querySelectorAll('.error')) {
        span.textContent = errors[span.id.replace('-error', '')] || '';
      }
      const ok = Object.keys(errors).length === 0;
      document.getElementById('result').textContent = ok ? 'Konto założone' : 'Popraw zaznaczone pola';
    });
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.