Les 11: Formuliervalidatie
Home ›JavaScript-track ›Les 11

✅ Formuliervalidatie

⏱ Geschatte leestijd: 20 minuten · 7 stappen

Formuliervalidatie met JavaScript geeft gebruikers directe, vriendelijke feedback — zonder een pagina-herlaad. In de Symfony-track leer je server-side validatie, maar goede client-side validatie maakt de gebruikerservaring veel beter.

1 Waarden lezen met .value

Wat betekent dit?

input.value geeft altijd een string terug, ook als het veld type="number" heeft. Voor getallen gebruik je parseInt(), parseFloat() of Number(). Gebruik altijd .trim() om spaties aan het begin en eind te verwijderen. 

const naamInput = document.getElementById('naam');
const leeftijdInput = document.getElementById('leeftijd');

const naam = naamInput.value.trim();        // "Sara"
const leeftijd = parseInt(leeftijdInput.value); // 21 (getal)

console.log(typeof naam);      // "string"
console.log(typeof leeftijd);  // "number"

2 Basisvalidatie: leeg, lengte, type 

function valideerNaam(naam) {
  if (naam.trim() === '') {
    return 'Naam is verplicht.';
  }
  if (naam.trim().length < 2) {
    return 'Naam moet minstens 2 tekens bevatten.';
  }
  return null; // geen fout = geldig
}

function valideerLeeftijd(waarde) {
  const num = parseInt(waarde);
  if (isNaN(num)) return 'Voer een geldig getal in.';
  if (num < 0 || num > 150) return 'Leeftijd moet tussen 0 en 150 liggen.';
  return null;
}

💡 Patroon: laat validatiefuncties null teruggeven bij succes en een foutstring bij mislukking. Zo kun je gemakkelijk controleren: if (fout) { toonFout(fout); }.

3 Foutmeldingen tonen en verbergen

Plaats een leeg <p>-element onder elk invoerveld. Gebruik classList en textContent om foutmeldingen te tonen of te verbergen. 

<!-- HTML -->
<input id="email" type="text" placeholder="E-mail">
<p id="fout-email" class="fout" style="display:none;color:red"></p>
// JavaScript
function toonFout(id, bericht) {
  const el = document.getElementById(id);
  el.textContent = bericht;
  el.style.display = 'block';
}

function verbergFout(id) {
  const el = document.getElementById(id);
  el.textContent = '';
  el.style.display = 'none';
}

// Gebruik:
const emailFout = valideerEmail(email);
if (emailFout) {
  toonFout('fout-email', emailFout);
} else {
  verbergFout('fout-email');
}

4 E-mail valideren met regex

Wat betekent dit?

Een reguliere expressie (regex) is een patroon waarmee je tekst kunt controleren. /patroon/.test(tekst) geeft true als de tekst overeenkomt met het patroon. 

// Eenvoudige e-mailcheck: bevat @ en een punt na @
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function valideerEmail(email) {
  if (email.trim() === '') return 'E-mail is verplicht.';
  if (!emailRegex.test(email)) return 'Voer een geldig e-mailadres in.';
  return null;
}

// Testen:
console.log(valideerEmail('sara@voorbeeld.nl')); // null (geldig)
console.log(valideerEmail('geen-email'));          // foutmelding
console.log(valideerEmail(''));                    // foutmelding

5 Oefening 1: Inlogformulier valideren

Opdracht:

Valideer het inlogformulier bij submit. Toon specifieke foutmeldingen: e-mail moet '@' bevatten, wachtwoord moet minimaal 6 tekens zijn. Bij succes: toon "Inloggen gelukt!".

✓ e.preventDefault() in de submit-handler

✓ E-mailcheck: bevat @

✓ Wachtwoordcheck: .length >= 6

✓ Foutmeldingen zichtbaar per veld

editor
Live preview

6 Oefening 2: Live validatie

Opdracht:

Voeg live validatie toe: valideer het e-mailveld terwijl de gebruiker typt (op het input-event). Toon een groen vinkje (✓) als het e-mailadres geldig is, een rood kruisje (✗) als het ongeldig is.

✓ 'input' event op het e-mailveld

✓ Regex-check: /^[^\s@]+@[^\s@]+\.[^\s@]+$/

✓ Indicator toont ✓ of ✗ live

editor
Live preview

7 Eindopdracht: Registratieformulier

Bouw een volledig gevalideerd registratieformulier:

✓ Naam: verplicht, minimaal 2 tekens

✓ E-mail: regex-validatie

✓ Wachtwoord: minimaal 8 tekens

✓ Wachtwoord herhalen: moet overeenkomen

✓ preventDefault() bij submit

✓ Elk veld toont zijn eigen foutmelding

✓ Bij volledig succes: toon groene bevestiging

editor
Live preview
📄 Volledig voorbeeld: validatie.html 
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Formuliervalidatie</title>
  <style>
    input { display: block; width: 300px; padding: 8px; margin-bottom: 4px; }
    .fout { color: red; font-size: 13px; margin-bottom: 8px; min-height: 16px; }
    button { padding: 10px 20px; background: #3b82f6; color: white; border: none; cursor: pointer; }
  </style>
</head>
<body>
  <form id="form">
    <input id="naam" placeholder="Naam">
    <p id="f-naam" class="fout"></p>
    <input id="email" placeholder="E-mail">
    <p id="f-email" class="fout"></p>
    <input id="ww" type="password" placeholder="Wachtwoord">
    <p id="f-ww" class="fout"></p>
    <button type="submit">Verzenden</button>
  </form>
  <p id="ok" style="color:green;display:none">Formulier verzonden!</p>

  <script>
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    function fout(id, msg) {
      document.getElementById(id).textContent = msg;
    }

    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();
      let geldig = true;

      const naam = document.getElementById('naam').value.trim();
      if (naam.length < 2) { fout('f-naam', 'Naam moet minstens 2 tekens zijn.'); geldig = false; }
      else fout('f-naam', '');

      const email = document.getElementById('email').value.trim();
      if (!emailRegex.test(email)) { fout('f-email', 'Ongeldig e-mailadres.'); geldig = false; }
      else fout('f-email', '');

      const ww = document.getElementById('ww').value;
      if (ww.length < 8) { fout('f-ww', 'Wachtwoord minimaal 8 tekens.'); geldig = false; }
      else fout('f-ww', '');

      if (geldig) document.getElementById('ok').style.display = 'block';
    });
  </script>
</body>
</html>
← Les 10 Les 12 →