Les 9: formulier controle met javascript.

Transcriptie

1 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.

2 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. <form name="myform" id="myform" action="les9_ok.html" method="post" onsubmit="return checkform(this);return null;"> <label for="naam" id="naamlabel">naam</label> <input type="text" name="naam" id="naam" class="txt" /> <label for="voornaam" id="voornaamlabel">voornaam</label> <input type="text" name="voornaam" id="voornaam" class="txt" /> <label for=" " id=" label"> </label> <input type="text" name=" " id=" " class="txt" /> <br class="clear" /> <input type="submit" name="submit" value="submit" class="btn" /> <input type="reset" name="reset" value="reset" class="btn" /> </form> 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. <form name="myform" id="myform" action="les9_ok.html" method="post" onsubmit="return checkform(this);return null;"> 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.

3 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"></script> 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;

4 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 ): 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. 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:

5 if (form.naam.value == ""){ document.getelementbyid("naamlabel").innerhtml = 'naam: verplicht in te vullen'; 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("naamlabel").innerhtml = 'naam: verplicht in te vullen'; 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 . 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("naamlabel").innerhtml = 'naam: is verplicht in te vullen'; else {

6 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'; else { document.getelementbyid("voornaam").style.bordercolor='#666'; document.getelementbyid("voornaamlabel").innerhtml = 'voornaam:'; if (form. .value == ""){ document.getelementbyid(" ").style.bordercolor='red'; document.getelementbyid(" label").innerhtml = ' is verplicht in te vullen'; else { document.getelementbyid(" ").style.bordercolor='#666'; document.getelementbyid(" label").innerhtml = ' '; if(form. .value!= ""){ var str=form. .value; var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66)\.([az]{2,6(?:\.[a-z]{2)?)$/i if (filter.test(str)){ document.getelementbyid(" label").innerhtml = ' '; document.getelementbyid(" ").style.bordercolor='#666'; else{ document.getelementbyid(" label").innerhtml = ' je moet een geldig adres invullen'; document.getelementbyid(" ").style.bordercolor='red'; return postmessage;