Wanneer je interactie wilt voorzien met de bezoekers op je website ga je onvermijdelijk te maken krijgen met invoerformulieren. Helaas misbruiken vele mensen deze interactiemogelijkheid door onzinnige dingen te versturen.

Dan heb ik het nog niet eens gehad over de professionele spammers die er hun bezigheid van hebben gemaakt om ons als webmasters ongewenste mail te bezorgen.

Gelukkig kun je dit misbruik beperken door je invoervelden te controleren vooraleer de gegevens daadwerkelijk worden verzonden. Je kunt controleren of er wel degelijk iets is ingevuld én dat wat ingevuld is, overeenkomt met wat je verwacht dat in een bepaald veld zou moeten worden ingevuld.

We kunnen deze invoercheck uitvoeren met JavaScript of met PHP. Als je een waterdichte oplossing wilt, zul je PHP moeten gebruiken. Niet iedereen beschikt echter over deze mogelijkheid.

Wat je dan kunt doen, is je invoervelden controleren met behulp van JavaScript. Let op, deze methode is niet waterdicht omdat de bezoeker JavaScript kan uitschakelen in zijn browser.

Lege velden niet toestaan

We gaan beginnen met simpelweg te controleren of er wel degelijk iets is ingevuld in een invoerveld. Wanneer iemand niks invult, willen we voorkomen dat we een bericht zonder inhoud in onze mailbox aantreffen.

We gaan een functie controleer_leeg() programmeren. Deze functie moet aangeroepen worden wanneer de gebruiker het invoerveld verlaat; hiervoor gebruiken we de event handler onchange.

De functie ziet er zo uit:

<script type="text/javascript">
<!--
function controleer(contact)
{
  if(contact.naam.value == "")
  { alert("Je hebt niks ingevuld."); }
}
//-->
</script>

In de functie stoppen we als parameter de naam van het formulier, in dit geval contact. Vervolgens controleren we de waarde (value) van het invoerveld naam dat zich bevindt in het formulier contact. We roepen deze functie in ons formulier als volgt aan:

<form name="contact" method="post">
Naam:<input type="text" name="naam" onchange="controleer(this.form)" />
</form>

De event handler onchange roept hier de functie controleer_leeg() aan en vertelt ons dat het over dit (this) formulier gaat, namelijk het formulier contact. Getallen controleren

In ons formulier willen we ook een invoerveld toevoegen dat vraagt naar de leeftijd van de bezoeker. Ook hier zouden we kunnen controleren of de bezoeker iets heeft ingevuld, maar we kunnen dit veel specifieker doen.

De bezoeker gaat hier altijd een getal moeten invullen; dit getal kan niet kleiner zijn dan 0 en niet groter dan pakweg 106 jaar. We gaan dit testen binnen de bestaande functie. In dit voorbeeld gaan we enkel waarden tussen 18 jaar en 65 jaar toestaan.

Voeg onderstaande controle toe aan de bestaande functie:

 if(contact.leeftijd.value < "18" || contact.leeftijd.value > "65")
{ alert("Je hebt als leeftijd "+contact.leeftijd.value+" jaar opgegeven. 
Dit is geen correcte waarde."); }

Voeg ook de code toe aan je invoerveld om de functie te koppelen aan het invoerveld:

Leeftijd: <input type="text" name="leeftijd" onchange="controleer(this.form)">

E-mailadres controleren

In ons formulier voorzien we ook nog een invoerveld dat naar het e-mailadres van de bezoeker vraagt. We zouden gewoon kunnen controleren of er enige invoer is, maar ook hier gaan we de controle specifieker aanpakken. In een e-mailadres komt altijd een "@" voor, dus we controleren of dit teken in het veld voorkomt.

Breid daarom de bestaande functie uit met deze code:

if(tekst.email.value =="" || tekst.email.value.indexOf("@") == -1)
{ alert("Dit e-mailadres is niet geldig."); }

We koppelen de functie aan het invoerveld email:

E-mailadres: <input type="text" name="email" onchange="controleer(this.form)">

Lengte controleren

Als laatste gaan we controleren of een bericht dat ingevoerd is niet te lang is. Voeg daarom onderstaande code aan de functie toe:

if(contact.opmerkingen.value.length > "30")
{ alert ("Uw opmerking is te lang."); }

Voeg een tekstveld toe aan uw formulier om de gebruiker de kans te geven enkele opmerkingen in te voeren:

Omschrijving: <textarea name="opmerkingen" cols="100" rows="5" 
              onchange="controleer(this.form);"></textarea>

De volledige functie ziet er nu als volgt uit:

function controleer(contact)
{

  if(contact.naam.value == "")
  { alert("Je hebt niks ingevuld."); }

  if(contact.leeftijd.value < "18" || contact.leeftijd.value > "65")
  { alert("Je hebt als leeftijd "+contact.leeftijd.value+" jaar opgegeven. Dit is geen correcte waarde."); }

  if(contact.email.value =="" || contact.email.value.indexOf("@") == -1)
  { alert("Dit e-mailadres is niet geldig."); }

  if(contact.opmerkingen.value.length > "30")
  { alert ("Uw opmerking is te lang."); }

}

Alle velden van het formulier zijn nu onderworpen aan een controle.

Resultaat

Indien er iets niet duidelijk is, kun je steeds het volledig uitgewerkte voorbeeld bekijken.