Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
Formuliervalidatie Met Javascript
2
Wat is validatie? Controleren op geldigheid van gebruikersinvoer
Bijvoorbeeld: formaat adres Datums Lege velden Foutieve invoer voorkomen door: Radiobuttons, checkboxes, pulldown menu
3
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
4
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
5
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)
6
DOM gebruik in formulier
… Leeftijd: <input type=“text” onchange=“ if(document.klantformulier.leeftijd.value <= 17) { alert(‘ongeldige leeftijd! Moet 18+ zijn!’); }” Name = “leeftijd”>
7
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
8
Events Keyboard events: Mouse events: Onkeydown toets ingedrukt
Onkeypress toets ingedrukt en losgelaten Onkeyup toets losgelaten Mouse events: Onclick Onmouseup Onmousedown Onmousemove Onmouseout onmouseover
9
Events Voorbeeld toepassing event:
<img src=“beeld1.jpg” onmouseover=“mijnfunctie()” > <input type=“text” onchange=“alert(‘naam gewijzigd!’)” name=“achternaam”
10
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>
11
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>
12
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
Verwante presentaties
