Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe
INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle op formulieren en afhandeling van deze fouten al een dagdagelijkse job. Het zijn ook deze foutcontroles die het mogelijk maken om een goede functionerende webapplicatie s te maken. Javascript wordt hiervoor zeer veel gebruik bij het bouwen van webapplicatie s. Want in tegenstelling tot PHP gaat de server de scripting niet uitvoeren maar de browser zelf. Daarom zal je ook zien dat in de praktijk Javascript en PHP vaak tegelijk worden gebruikt in pagina s. Als je goed oplet wanneer je aan het surfen bent merk je zelfs bij pagina s die je dagelijks bezoekt dat ze aan foutcontrole met Javascript doen. Bijvoorbeeld Facebook: Als je jezelf wilt gaan registreren maar je niet alle velden invult krijg je vanonder aan de pagina een foutmelding dat je alle velden verplicht moet invullen. Deze controle wordt aan de hand van Javascript gedaan. Het kan ook zijn dat je alle velden wel hebt ingevuld maar niet aan de juiste vereisten, dit kunnen we ook met Javascript controleren. 1
Zonder deze invoercontrole kan het zijn dat er verkeerde gegevens in onze databank gaan of zelfs dat heel de webapplicatie vastloopt. Het is een detail dat de meeste beginnende webdesigners uit het oog verliezen doordat het maar een detail lijkt. TOEPASSEN Allereerst gaan we in deze les een klein formuliertje maken waarbij we de ingevulde gegevens gaan controleren. Wanneer de gebruiker van het formulier de gegevens wilt wijzigen door op de knop te drukken maar de gegevens nog niet zijn ingevuld zal Javascript het volgende resultaat genereren. In dit voorbeeld zie je dat we naast de velden dat niet zijn ingevuld een boodschap in een rood lettertype gaan weergeven zodat de gebruiker weet wat er fout is. 2
CODE VOOR HET FORMULIER <body> <div class="hoofding"> <p> <img src="logo.png" alt="logo" title="logo"/> Gegevenscontrole </p> </div> <form name="myform" id="myform" method="post" action="goed.html"> <table cellspacing="4"> <td><label for="naam">naam:</label></td> <td><input type="text" name="naam" id="naam"></td> <td><label id="naamverplicht" class="fout"></label></td> <td><label for="geboortedatum">geboortedatum:</label></td> <td><input type="text" name="gebdatum" id="gebdatum" size="20" maxlength="10"></td> <td><label id="datumverplicht" class="fout"></label><br /> <label id="datumongeldig" class="fout"></label> </td> <td><label for="nummer">nummer:</label></td> <td><input type="text" name="nummer" id="nummer" size="20" maxlength="10"></td> <td><label id="nummerverplicht" class="fout"></label> <br /> <label id="nummerongeldig" class="fout"></td> <td><label for="geslacht">geslacht:</label></td> <td><input type="radio" name="geslacht" id="man" value="m">man<br /> <input type="radio" name="geslacht" id="vrouw" value="v">vrouw</td> <td><label id="geslachtverplicht" class="fout"></label></td> <td><label for="klas">klas:</label></td> <td><select name="klas" id="klas"> <option value="0">-- Selecteer een klas --</option> <option value="1">2 TI 1</option> <option value="2">2 TI 2</option> <option value="3">2 TI 3</option> <option value="4">2 TI 4</option> </select> </td> <td><label id="klasverplicht" class="fout"></label></td> 3
<td><label for="email">e-mail:</label></td> <td><input type="text" name="email" id="email" size="50" maxlength="50"></td> <td><label id="emailverplicht" class="fout"></label></td> <td></td> <td> <input type="button" value="wijzigen" onclick="wijzig()" /> </td> </table> </form> </body> 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 invoer velden. Bij keuzerondjes geven we ook een id mee maar om aan te duiden dat ze bij elkaar horen geven we beide keuzerondjes dezelfde name mee. JAVASCRIPT OPROEPEN Om Javascript de controle te laten uitvoeren hebben we aan onze wijzigen knop de eigenschap onclick met de functie wijzig() meegegeven. Dit zorgt ervoor dat wanneer we op de knop drukken de functie wijzig() die in onze javascript code staat zal worden uitgevoerd. Alvorens de gegevens worden verstuurd naar de pagina die we met de action meegeven (in ons voorbeeld geen pagina). Voor onze Javascript-code kunnen we kiezen of we deze in een extern bestand gaan maken (.js file) of dat we onze code gewoon rechtstreeks in onze pagina in het <head> </head> deel gaan schrijven. Voor ons voorbeeld gaan we gewoon rechtstreeks in de pagina schrijven. Als je het toch uit een extern bestand wilt oproepen doe je het met volgende code in het head deel: <script type="text/javascript" src="naam en locatie van je bestand met extensie"></script> 4
JAVASCRIPT CODE <script type="text/javascript"> function wijzig() { var ok = true;... } </script> Dit is onze Javascript code met daarin onze functie wijzig(). We zullen nu samen stap voor stap overlopen wat deze code echt betekend. Onze var ok = true; is een variabele om bij te gaan houden of onze velden zijn ingevuld. Met dit deel code gaan we controleren of het veld naam is ingevuld door de gebruiker. Dit doen we aan de hand van de functie document.getelementbyid( ), dit is een veel gebruikte functie in Javascript en daarom is het ook zeer van belang om alle elementen een uniek id mee te geven. Als het element een lege waarde heeft gaan we de tekst genereren die naast het element moet komen om aan de gebruiker duidelijk te maken wat hij verkeerd heeft gedaan. Ook zetten we onze variabele ok op waarde false. Zoals hierboven doe je bij alle velden waar de gebruiker zelf iets moet invullen. In dit vb dus bij naam, geboortedatum, nummer en e-mail. Bij e-mail, nummer en geboortedatum moet er meer gecontroleerd worden dan enkel of het ingevuld is of niet. Nummer moet er gecontroleerd worden of de input nummeriek is: Voor nummerieke waarden is er een functie isnan (is Not a Number). 5
Geboortedatum gaan we kijken of de input een datum is: We gebruiken hier de functie isdate die we nog zelf moeten aanmaken. Deze komt buiten de wijzig() functie. 6
Bij e-mail gaan we kijken of het een echte e-mail is: De filter die je ziet kan je makkelijk opzoeken op het Internet en ook hoe je er zelf maakt als je een speciale input verwacht. Dan hebben we nog de keuzerondjes en de keuzelijst. Keuzerondjes: Bij de keuzerondjes we gaan controleren met de functie.checked in plaats van met.value zoals bij de tekstboxen. Keuzelijst: Hier gaan we kijken of de selectedindex 0 is of niet. Als deze 0 is dan heeft de gebruiker niets gekozen. Helemaal vanonder in de code gaan we controleren of onze variabele ok nog steeds op true staat. Als dit het geval is betekend dit dat al onze velden waren ingevuld en het formulier dus mag verzonden worden. Als dit niet het geval is krijgen we naast de foutieve velden onze fouten te zien. 7