Les 9: formulier controle met javascript

Les 9: formulier controle met javascript.    Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side  scripting is, is java client side scripting. Dwz, niet de server gaat de scripting uitvoeren maar de  browser gaat deze scripting uitvoeren. 

Toepassing.  We gebruiken het formulier van de vorige les. 

  Wanneer de gebruiker de gegevens zal verzenden en de velden niet ingevuld heeft gaan het  volgende resultaat genereren. 

  Een typische toepassing van een javascript controle is een window dat weergegeven wordt, hier  worden dan vaak de foutmeldingen in weergegeven. 

 

Je kan met javascript echter heel wat meer dan enkel deze venstertjes genereren om foutmeldingen  te tonen. Deze venstertjes zijn trouwens erg ongebruiksvriendelijk. In ons voorbeeld zie je dat we de  velden die niet ingevuld zijn een rode markering gaan geven. Ook de tekst bij het invul venster gaan  we aanpassen met een correcte foutmelding.  Dit kunnen we doen met DOM scripting. Javascript laat ons toe de DOM structuur van het document  aan te passen. 

Code voor het formulier.   

naam voornaam email

Eerst en vooral moeten we ervoor zorgen dat we elk element specifiek moeten kunnen aanspreken.  Om dit te kunnen doen moeten we ervoor zorgen dat onze elementen uniek zijn. Dit doen we door  een id attribuut toe te voegen. We voegen een id attribuut toe aan de labels en aan de invoer velden.  Deze staan in het groen en vet aangeduid hierboven in de code.     

Javascript oproepen.  Om een javascript de controle te laten uitvoeren voor ons formulier de gegevens zal verzenden  moeten we dit script oproepen bij het versturen van de gegevens. Dit doen we met de “onsubmit”.  Deze wordt toegevoegd in de form tag van ons formulier. 

  Dit zorgt ervoor dat de functie “checkform” die we plaatsen in ons javascript bestand (.js bestand)  uitgevoerd zal worden. Alvorens de gegevens verstuurd worden naar de pagina, vermeld in de action  van het formulier.   

Js bestand  Een js bestand, is een javascript bestand. We kunnen onze javascripts in een externe file plaatsen en  deze oproepen op de pagina’s waar we deze nodig hebben. Dit zorgt voor een ordelijke structuur en  makkelijker te onderhouden code.  Best plaats je altijd je javascripts in externe bestanden.  We maken een nieuw bestandje aan en noemen dit “formvalidation.js”. Dit is een javascript file en  hierin gaan we ons script plaatsen voor het controleren van ons formulier.  In de head van onze php pagina plaatsen we de volgende regel, om het javascript bestand op te  roepen.  <script type="text/javascript" src="formvalidation.js">

Het controle script  Om onze gegevens van het formulier te controleren gaan we een functie schrijven, deze zal ons een  true terug geven wanneer alle data correct is, een false wanneer data niet correct is ingevuld.   Wanneer deze functie een true terug geeft, zal de data vervolgens verzonden worden naar de  pagina, vermeld in het action atribuut van ons formulier.  Wanneer onze functie echter een false terug stuurt, zullen de gegevens niet verzonden worden, onze  foutmeldingen zullen echter getoond worden en de gebruiker moet zijn gegevens aanpassen.    Het script:  We maken een functie.  function checkform ( form ) { …… uit te voeren code komt hier. }

We gebruiken een variabele postMessage en plaatsen deze standard op true. Naarmate we nu  vervolgens de controles gaan toevoegen gaan we deze variabele op false plaatsen wanneer de invoer  niet correct is.  function checkform ( form ) { var postMessage = true;

return postMessage; }

We controleren als naam ingevuld is, dit doen we:  if (form.naam.value == ""){… uit te voeren code komt hier}

Form.naam.value: hiermee vragen we in javascript de waarde op van het tekstveld naam. Wanneer  deze waarde leeg is, is er echter geen naam ingevuld. 

if (form.naam.value == ""){ document.getElementById("naam").style.borderColor='red'; } document.getElementById(“naam”): De functie getElementById()

Dit is een veelgebruikte funtie in javascript. Als we de naam even ontleden spreekt deze voor zich.  Get + Element + By + Id ‐> deze functie gebruiken we om een specifiek element op de pagina te  selecteren.  Aan het begin van deze les hebben we ervoor gezorgd dat elk element uniek is op deze pagina. We  hebben hiervoor het “id” attribuut toegevoedg!  Dmv van deze functie kunnen we nu dit element gaan aanspreken en de eigenschappen van dit  element gaan wijzigen. Dit doen we met DOM scripting.  Een leeg tekstveld vaan we een rode rand geven, dat doen we als volgt.  document.getElementById("naam").style.borderColor='red';   

We spreken het element “naam” aan, dit is het invulveld van ons formulier, waar de gebruiker zijn  naam moet invullen. Hiervan gaan we de border een rode kleur geven.    Het volgende wat we gaan doen is de melding geven. Hiervoor gaan we het label attribuut  aanpassen. We kunnen met DOM scripting de inhoud van elementen gaan veranderen. Dit doen we  met “innerHTML”.  document.getElementById("naamlabel").innerHTML = 'naam: verplicht in te vullen'; 

 

We spreken het label attribuut aan, dit weer door het id, wat we gegeven hebben aan dit attribuut in  de html code. Vervolgens gebruiken we de functie “innerHTML” en op deze manier veranderen we  de tekst inhoud van dit label.    De volledige code is momenteel als volgt: 

if (form.naam.value == ""){   document.getElementById("naam").style.borderColor='red';   document.getElementById("naamlabel").innerHTML = 'naam: verplicht in te vullen';   postMessage = false ;   }   

Wanneer deze code uitgevoerd wordt wil het zeggen dat de gebruiker zijn naam niet ingevuld heeft.  Wanneer dit het geval is, moeten we ook de variabele postMessage op false plaatsen. Dit om te  verhinderen dat het formulier onze gegevens zal verzenden. Dit doen we met “postMessage = false  ;”. 

Wanneer een gebruiker meerdere malen zijn gegevens moet veranderen of aanpassen in het  formulier, moeten we er ook voor zorgen dat wanneer de gegevens juist ingevuld staan, dat de  velden gereset worden en terug hun oorspronkelijke lay out aannemen.  Om dit te doen gaan de onze if structuur uitbreiden met de else, hierin gaan we de stijlregels  terugplaatsen zoals het hoort. 

if (form.naam.value == ""){ document.getElementById("naam").style.borderColor='red'; document.getElementById("naamlabel").innerHTML = 'naam: verplicht in te vullen'; postMessage = false ; }else { document.getElementById("naamlabel").innerHTML = 'naam:'; document.getElementById("naam").style.borderColor='#666'; }

Boven staande stukje code is alles wat we nodig hebben om de controle uit te voeren op het veld  waar de gebruiker de naam moet invullen.   Ons formulier heeft echter 3 velden, een naam, voornaam en email. Deze moeten we dus alle 3 op  deze manier gaan controleren.  De volledige code is:  function checkform ( form ) { var postMessage = true; if (form.naam.value == ""){ document.getElementById("naam").style.borderColor='red'; document.getElementById("naamlabel").innerHTML = 'naam: is verplicht in te vullen'; postMessage = false ; }else {

document.getElementById("naamlabel").innerHTML = 'naam:'; document.getElementById("naam").style.borderColor='#666'; } if (form.voornaam.value == ""){ document.getElementById("voornaam").style.borderColor='red'; document.getElementById("voornaamlabel").innerHTML = 'voornaam: is verplicht in te vullen'; postMessage = false ; } else { document.getElementById("voornaam").style.borderColor='#666'; document.getElementById("voornaamlabel").innerHTML = 'voornaam:'; } if (form.email.value == ""){ document.getElementById("email").style.borderColor='red'; document.getElementById("emaillabel").innerHTML = 'email: is verplicht in te vullen'; postMessage = false ; } else { document.getElementById("email").style.borderColor='#666'; document.getElementById("emaillabel").innerHTML = 'email:'; } if(form.email.value != ""){ var str=form.email.value; var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([az]{2,6}(?:\.[a-z]{2})?)$/i if (filter.test(str)){ document.getElementById("emaillabel").innerHTML = 'email:'; document.getElementById("email").style.borderColor='#666'; }else{ document.getElementById("emaillabel").innerHTML = 'email: je moet een geldig emailadres invullen'; document.getElementById("email").style.borderColor='red'; postMessage = false ; } } return postMessage; }