De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Formuliervalidatie Met Javascript.

Verwante presentaties


Presentatie over: "Formuliervalidatie Met Javascript."— Transcript van de presentatie:

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


Download ppt "Formuliervalidatie Met Javascript."

Verwante presentaties


Ads door Google