REGNERY

Web programmeren voor iedereen

🧪 Les 3: Werken met invoervelden en formulieren in jQuery

In deze oefening leer je:

✅ Hoe je een tekst uit een invoerveld leest
✅ Hoe je een foutmelding toont als het veld leeg is
✅ Hoe je een resultaat op de pagina laat zien
✅ Hoe je de invoer kunt controleren (input validatie)

📋 Wat gaan we bouwen?

We maken een simpele “naam invoer”-functie. De gebruiker vult zijn naam in, klikt op een knop en krijgt een persoonlijke begroeting. Als het invoerveld leeg is, laten we een foutmelding zien.

✅ 1. HTML-code

<!DOCTYPE html>
<html>
<head>
    <title>Invoer met jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #resultaat {
            margin-top: 10px;
            font-weight: bold;
        }
        .fout {
            color: red;
        }
    </style>
</head>
<body>

    <h2>Vul je naam in:</h2>

    <input type="text" id="naamInput" placeholder="Typ je naam hier">
    <button id="verzendKnop">Verzend</button>

    <p id="resultaat"></p>

    <script>
        // jQuery komt hieronder
    </script>

</body>
</html>

✅ 2. jQuery toevoegen

Plaats dit in het <script>-gedeelte onderaan de pagina:

$(document).ready(function() {
    $('#verzendKnop').click(function() {
        // 1. Lees de waarde van het invoerveld
        var naam = $('#naamInput').val();

        // 2. Controleer of het veld leeg is
        if (naam.trim() === "") {
            $('#resultaat').text("Vul alsjeblieft je naam in!")
                           .addClass('fout');
        } else {
            // 3. Toon de begroeting
            $('#resultaat').text("Hallo, " + naam + "!")
                           .removeClass('fout');
        }
    });
});

🧠 Wat gebeurt hier?

$('#verzendKnop').click(...)

– Als je op de knop klikt, wordt de code binnen deze functie uitgevoerd.

$('#naamInput').val()

– Hiermee lees je wat de gebruiker heeft ingetikt in het tekstvak.

if (naam.trim() === "")

– Hiermee controleer je of het veld leeg is.
– .trim() zorgt dat spaties voor en na de naam worden genegeerd.

$('#resultaat').text(...)

– Hiermee zet je nieuwe tekst in de <p id="resultaat">.

.addClass('fout') en .removeClass('fout')

– Je verandert de kleur van het resultaat (rood bij foutmelding).

✨ Wat leer je hiervan?

  • Hoe je met jQuery gebruikersinvoer verwerkt
  • Hoe je eenvoudige logica (if/else) toepast
  • Hoe je klassen gebruikt voor foutmeldingen
  • Hoe je interactie toevoegt aan een formulier