Inputvelden controleren

Controleren van een inputveld

Zoals je bij HTML hebt geleerd kan je inputvelden in een formulier bepaalde informatie/ attributen meegeven om deze voordat het formulier verstuurd wordt gecontroleerd worden, is de informatie niet correct, dan wordt het formulier niet verstuurd en krijg je een foutmelding te zien.

<form method="post">
  Username: <input type="text" name="username" required><br>=>
  Email: <input type="email" name="useremail" required><br>
  <input type="submit" value="verstuur">
</form>

LET OP: Altijd maar 1 veld en 1 controle

Je krijgt als je op de submit-knop klikt maximaal 1 foutmelding te zien over 1 oorzaak.

• Username leeg & email adres leeg - Je krijgt de foutmelding dat username gevuld moet zijn.
• Username gevuld & email adres leeg - Je krijgt de foutmelding dat email gevuld moet zijn.
• Username & email gevuld, maar incorrect e-mail adres - Je krijgt de foutmelding dat het email adres niet correct is.
• Alles correct ingevuld, je kan het formulier versturen

Controleren met JavaScript

Met JavaScript kan je ook een los inputveld, ook als het niet in een formulier staat, controleren. Dit kan met twee methodes die je op een inputveld-element kan aanroepen.

.checkValidity()

Met de methode .checkValidity() krijg je een boolean terug (true/ false). Het is true als het input veld volgens de methode goed is, false als er iets fout is. In onderstaand voorbeeld is er in de HTML een input veld als volgt:

<input type="email" class="useremail" required>

const userEmailElement = document.querySelector('.useremail');
if (!userEmailElement.checkValidity()) {
    alert('Dat is geen geldig e-mail adres');
}

.reportValidity()

Een andere optie is om de controle van het inputveld te tonen (en te controleren) je hoeft dan zelf geen code/ popup/ alert te schrijven om de gebruiker op de hoogte te stellen.

const userEmailElement = document.querySelector('.useremail');
if (!userEmailElement.checkValidity()) {
    userEmailElement.reportValidity();
}

Eigen JavaScript validatie

Natuurlijk kan je ook eigen JavaScript validatie gebruiken. Dit is soms handiger, denk bijvoorbeeld aan dat het makkelijk is om de HTML aan te passen (bv. de required attribute via de developers console van een element te halen. En dan is het met alleen JavaScript wat lastiger.

Of je wilt een invoerwaarde controleren of dit een bepaalde naam (van een vereniging/ school) of een deel van een e-mail adres (@rocmondriaan) bevat. Dergelijke 'lastigere' controles kan je niet met de basis HTML attributen opvangen en dan zal je met de .value attribute op het element de waarde moeten ophalen en eigen validatie schrijven.

HTML Attribute cheatsheet

In de onderstaande lijst vind je de meest voorkomende attributen en types die je kan gebruiken voor formulier validatie/ ondersteuning. Bij onderstaande types blijft een invoerveld met text in te voeren, andere opties als type="checkbpx" of type="button" staan niet in de lijst.
LET OP: de weergave van de velden kan verschillen per webbrowser!

type attribute

type attribute