7.Validatie

7.1. Formuliervalidatie

De bedoeling van de HTML5-validatie is om op termijn de validatie in JavaScript overbodig te maken, maar zolang niet alle browsers HTML 5 volledig ondersteunen blijft het effect ervan onzeker.
Dus gebruiken we voorlopig JavaScript validatie als eerste/extra controle.

In de openingstag van het formulier voeg je de aanroep van de controlefunctie toe, bv:
<form method="post action="..." onsubmit="return valideer(this);">

We maken dus een functie valideer die

Een voorbeeld van zo'n functie kan zijn (met inputvelden name= Naam, Voornaam, Huisnr, Email en keuzerondjes Regime):
function valideer(dit) {
  if(dit.Naam.value.length < 2) {
    alert("Familienaam invullen AUB!");
    dit.Naam.focus();
    return false;
  }
  if(dit.Voornaam.value == "") {
    alert("Voornaam invullen AUB!");
    dit.Voornaam.focus();
    return false;
  }
  if(isNaN(dit.Huisnr.value)) {
    alert("Getal als huisnummer invullen AUB!");
    dit.Huisnr.focus();
    return false;
  }
  if(dit.Email.value == "" || dit.Email.value.indexOf(‘@’,1) == -1) {
    alert("Juist e-mailadres invullen AUB!");
    dit.Email.focus();
    return false;
  }
  if( !dit.Regime[0].checked && !dit.Regime[1].checked && !dit.Regime[2].checked) {
    alert("Ontbijt, half pension of vol pension?");
    dit.Regime[0].focus();
    return false;
  }
  return true;
}

Of bekijk de code onderin de broncode van dit zoekformulier.

7.2. Object RegExp

Een reguliere expressie of regular expression beschrijft een patroon van tekens. Zulke expressies worden veel gebruikt om op te zoeken of om tekenreeksen op juist formaat te controleren.

Je definieert zo'n patroon via de constructor, bv: var patroon = new RegExp("patroon"[, optie]);
Of nog eenvoudiger: var patroon = /patroon/[optie];

Er zijn twee mogelijke opties:

Er zijn verschillende functies om in een tekstwaarde op zoek te gaan naar een patroon.

Een patroon kan je samenstellen uit letterlijke tekens maar er worden ook heel wat expressies in gebruikt:

[0-9]een cijfer van 0 tot 9
[a-z]een kleine letter (a tot z)
[A-Z]een hoofdletter
[A-z]een letter, hoofdletter of kleine letter
[b9D]een 'b', een '9' of een 'D'
[^b9D]geen 'b', geen '9' en geen 'D'
[rood|groen|blauw]het woord 'rood' of 'groen' of 'blauw'
.de punt staat voor één willekeurig teken
[0-9]{3}drie cijfers na elkaar - herhaling met { } kan je op alle expressies toepassen
a+tenminste één 'a'
a*nul of meer a's
a?nul of één 'a'
^begin van de regel
$einde van de regel

bv: /[a-z]{1,6}/g zoekt minimum 1 tot maximum 6 kleine letters

bv2: /Java(Script)?/ vindt zowel Java als JavaScript

7.3. Foutcontrole

Errors en exceptions zijn uitzonderlijke gebeurtenissen die zich kunnen voordoen tijdens de uitvoering van een programma.

Als een fout optreedt, zal JavaScript een foutboodschap genereren, throws an error.
Zo'n fout kan je opvangen, catch en afhandelen.

Voorbeeld:
<p id="demo"></p>
<script>
try {
  adddlert("Welkom aan alle gasten!"); //tikfout
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

De variabele err bevat een instantie van object Error of een subclass hiervan en in elke browser kan je minstens volgende eigenschappen opvragen en gebruiken:

In plaats van de standaard foutboodschappen, kan je ook zelf een fout "opgooien", throw en een eigen boodschap naar variabele err sturen, bv:
if(isNaN(x)) throw "dit is geen getal";

Je kan bovendien de instructie finally toevoegen, die altijd uitgevoerd wordt, zowel na een correcte try als na een catch:
function functieNaam() {
  try {
    //uit te voeren statement(s)
  } catch(err) {
    //foutboodschap en foutafhandeling
  } finally {
    //boodschappen of close() voor bronnen die niet meer nodig zijn
  }
}