Formuliervalidatie Met Javascript
Wat is validatie? Controleren op geldigheid van gebruikersinvoer Bijvoorbeeld: formaat e-mailadres Datums Lege velden Foutieve invoer voorkomen door: Radiobuttons, checkboxes, pulldown menu
PHP en JavaScript Wat is het verschil? PHP is serversided JS is clientsided Validaties met PHP is altijd achteraf: het formulier is dan al verstuurd Validaties met JS is in de browser zelf, dus nog voordat er iets is verstuurd
Nadeel JavaScript Nadeel van JS is, dat het toegestaan moet zijn in de browser Daarom altijd ook nog extra validatie in PHP, voor het geval de browser JS niet ondersteunt
DOM: Document Object Model Om structuren in bijvoorbeeld HTML formulieren te onderscheiden en te benaderen Hiërarchisch van opzet Bijvoorbeeld: document.klantformulier.leeftijd.value om waarde van het veld “leeftijd” in formulier “klantformulier” af te vangen (valideren)
DOM gebruik in formulier … Leeftijd: <input type=“text” onchange=“ if(document.klantformulier.leeftijd.value <= 17) { alert(‘ongeldige leeftijd! Moet 18+ zijn!’); }” Name = “leeftijd”>
Events Events kunnen JavaScript-acties triggeren Window events: Onload document wordt geladen Onunload document wordt ontladen Form events: Onchange element is gewijzigd Onselect element is geselecteerd Onsubmit formulier is verstuurd Onreset formulier is gereset
Events Keyboard events: Mouse events: Onkeydown toets ingedrukt Onkeypress toets ingedrukt en losgelaten Onkeyup toets losgelaten Mouse events: Onclick Onmouseup Onmousedown Onmousemove Onmouseout onmouseover
Events Voorbeeld toepassing event: <img src=“beeld1.jpg” onmouseover=“mijnfunctie()” > <input type=“text” onchange=“alert(‘naam gewijzigd!’)” name=“achternaam”
Uitgewerkt voorbeeld <html> <head> <title>Mijn JavaScript</title> <script type=“text/javascript”> //<![CDATA[ function heeftspaties(tekst) { for (var i=0; i < tekst.value.length; i++) var c = tekst.value.charAt(i); if(c == “ “) alert(“tekst mag geen spaties bevatten!”); return true } return false //]]> </script>
Uitgewerkt voorbeeld </head> <body> <h3>Gebruikersnaam</h3> <form onSubmit=“return(heeftspaties(document.userform.gebruikersnaam));” method = “POST” name = “userform”> <input type = “text” name = “gebruikersnaam”> <input type = “submit”> </form> </body> </html>
Nog een voorbeeld Links: file://localhost/Volumes/FREECOM HDD/Lesmateriaal/workshopmateriaal/PHP/Formuliervalidatie met JS/veld.php file://localhost/Volumes/FREECOM HDD/Lesmateriaal/workshopmateriaal/PHP/Formuliervalidatie met JS/checkform.js