Geldigheid testen van formulier-velden

Bij het invullen van een formulier gebeurt het wel dat je sommige velden moet invullen. Dit noemt men validatie. Hier wordt een JavaScript besproken dat je kunt gebruiken om velden mee te valideren.

De code om dit script zelf te gebruiken staat onderaan deze bladzijde. Je kunt hem ook downloaden voor je eigen gebruik, inclusief de code van het uitgewerkte voorbeeld.

• Er worden drie items besproken:
  1. De globale werking van het script
  2. De noodzakelijke wijzigingen in het JavaScript
  3. Extra attributen in de <form>-tag
• Het JavaScript staat in een file met de naam formcheck.js. Het script bevat één function met de naam formCheck().
• De function formCheck() moet worden aangeroepen als het formulier (met behulp van een submit-button) aan de server wordt overgedragen voor behandeling. Hiervoor wordt de <FORM>-tag voorzien van het attribuut onSubmit="return formCheck(this)". De verwijzing this geeft aan dat het over dit formulier gaat, en niet over wat anders.
• Om een formulier te laten nakijken en er dan direct een andere functie op los te laten (bijvoorbeeld een JavaScript function aanroepen) is het noodzakelijk dat je een knop van het type submit gebruikt. De andere function zet je dan in het attribuut action="..." in de <form>-tag.
  Als je een JavaScript function wilt laten uitvoeren moet je dat expliciet vermelden, bijvoorbeeld: action="JavaScript:Mijn_function()".
  Deze wordt alleen geactiveerd als formCheck() de waarde true terug geeft, anders niet.
• De function formCheck() werkt met alle beschikbare form-items. 
• Om het script te kunnen gebruiken moet de file formcheck.js worden aangepast, en wel als volgt:
  
  • Als eerste geef je een lijst op met velden uit het formulier die verplicht ingevuld moeten worden.
    Hiervoor vul je de array fieldRequired met de namen van de velden zoals je ze in het formulier opgeeft met het attribuut name="....".
  • Vervolgens geef je een lijst met omschrijvingen, één per veld. Deze omschrijvingen verschijnen in de eventuele foutmelding.
    Hiervoor vul je de array fieldDescription.
  • Tenslotte zet je een melding dat de "De volgende velden moeten worden ingevuld" in de variabele alertMsg. Merk op dat het mogelijk is om escape-karakters te gebruiken in fieldDescription en alertMsg.
    Escape-karakters worden beschreven in het item "Werken met strings".
     
• De werking van het script is, zonder in details te treden, als volgt:
  
  • De lengte van alertMsg wordt bepaald.
  • De array met veldnamen fieldRequired wordt element voor element afgelopen.
  • Bij elk element wordt gekeken of het bestaat in het formulier. Als dat zo is wordt gekeken of er iets mee gedaan is. Als dat niet het geval is wordt de omschrijving (die in fieldDescription staat) toegevoegd aan alertMsg.
    • Bij tekstvelden (één of meer regels) wordt gekeken of er tekst in staat.
    • Bij een reeks checkboxen wordt gekeken of er tenminste één is aangevinkt.
    • Bij radiobuttons wordt gekeken of er één is aangezet.
  • Tenslotte wordt gekeken of de lengte van alertMsg is veranderd. Als dat zo is wordt er een alert op het scherm gezet en geeft de function formCheck() de waarde false terug. Hierdoor wordt tevens het daadwerkelijk versturen van het formulier naar de server tegengehouden.
    Als de lengte van alertMsg niet is veranderd geeft formCheck() de waarde true terug. Het formulier wordt overgedragen aan de server voor verdere behandeling.
• Als er radio-buttons in je formulier zitten waarvan je wilt dat die worden aangeklikt, moet je een aantal commentaar-markeringen in de file formcheck.js weghalen. Dat staat in formcheck.js aangegeven.
  Als er géén radio-buttons in je formulier zitten moet je dit stuk van het script niet veranderen, anders werkt het niet goed.
• Het laten controleren van een set radio-buttons heeft alleen zin als in het formulier geen enkel button van die set is aangezet (met behulp van het attribuut checked). Als er wel een is aangezet, zal een set radio-buttons altijd een waarde hebben.
   
• De function formCheck() kan er tegen dat geen enkel veld in het betreffende formulier hoeft te worden ingevuld. Ook het totaal ontbreken van een formulier in de code is geen probleem.
• Het is mogelijk om het script tussentijds aan te roepen, bijvoorbeeld voor een tussentijdse controle. Hiervoor zou je bijvoorbeeld een button kunnen maken.
• Het script kijkt niet naar de juistheid van de gegevens. Dat is ook niet te doen, want hoe weet je of bijvoorbeeld een naam correct is gespeld?
  Het is wel mogelijk om na te gaan of een e-mail adres correct is geformatteerd (dat het zou kunnen bestaan). Zie daarvoor het item "Geldigheid testen van een e-mail adres".
• Invoervelden van het type "hidden" worden door het script genegeerd. Het heeft trouwens toch geen zin om die als "verplicht" op te geven omdat ze door de gebruiker niet worden gezien en dus niet veranderd kunnen worden.
• In het hieronder gebruikte voorbeeld heeft het formulier geen name. Dit is voor de werking van het script ook niet nodig.
   
• Informatie over het gebruik van formulieren vind je in de rubriek "Datum en tijd, Formulieren.
• Hieronder staat een uitgewerkt voorbeeld. De code vind je in de downloadfile. Als je op de knop "Verzenden" drukt wordt de function formCheck() aangeroepen.
  Het formulier wordt overigens niet verzonden; in plaats daarvan verschijnt er een alert.

Uitgewerkt voorbeeld

Ja, ik wil meer weten over de mogelijkheden die deze techniek mij bieden kan.

Mijn specifieke vraag is:

Mijn gegevens zijn: Naam:  * Adres:  * Postcode:  * Woonplaats:  * Telefoon:  * Fax: E-Mail:  *

Velden gemarkeerd met * zijn verplicht.

Gebruik:

• De code staat gedeeltelijk in de in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet deze code in de <HEAD>)

<script src="formcheck.js"></script>

(Neem de volgende attributen op in de <form>-tag binnen de <BODY>)

action="...." method="post" onSubmit="return formCheck(this)"

Downloaden:
 
Druk op de knop:  File: voorb096.zip, 2100 bytes.

Opmerking:
 
Om deze code goed te gebruiken is het handig om de "Enter"-toets uit te schakelen, zodat je het formulier niet per ongeluk kunt versturen. Zie bij "Enter-toets uitschakelen in een formulier-veld".
 
Waar nodig en nuttig laat deze code zich ook goed combineren met een code om de correcte formattering van een e-mail adres na te gaan. Zie daarvoor het item "Geldigheid testen van een e-mail adres".
 
Gebruik van dit script garandeert niet dat er zinnige gegevens in de invoervelden worden ingevuld. Als er bijvoorbeeld alléén een spatie in een veld wordt ingevuld, ziet het script dit als tekst. Maar feitelijk is er niets ingevuld!