Input validatie
ik ben bezig aan een formulier. Op dit moment zijn mijn formulierpagina & foutafhandelinspagina (in PHP) klaar.
Ik zou graag het formulier eerst nog eens valideren, dus een tekst tonen naast het inputveld indien er een fout ingegeven is (zoals in HTML5 met e-mail).
Als dit alles oke is, zou ik graag alles tonen (alle POST-waarden). Slechts daarna, als men op een button drukt, wordt alles toegevoegd in de (MySQL) database.
Weet iemand hoe dit opgelost wordt? Waar kan ik een voorbeeld vinden van een validatie naast het script?
Edit: Ik was weer wat te snel => Met JQuery blijkt dit mogelijk, livevalidation. Is dit ook mogelijk door een PHP-document te includen en wat CSS aan te passen of iets anders?
Groeten,
Olivier
Gewijzigd op 29/06/2012 12:43:01 door Olivier Peeters
Dan heb je nog twee keuzes:
- Je kan het lokaal valideren, dan gaat javascript na of de gegevens goed geformateerd zijn.
- Je gebruikt Ajax. Wat dan gebeurt: javascript stuurt het formulier op naar de server, zonder dat de gebruiker daar iets van merkt; dan kan de server alles valideren en stuurt de server een bericht terug naar javascript om te vertellen of er iets fout ging.
Het hangt er vooral van af in welke mate je bereid bent om javascript in te schakel; je kan dat simpel doen, maar het kan ook heel erg uitgebreid.
Zeker ook eens zoeken op HTML5 validation. HTML5 doet tegenwoordi al veel voor je
Gewijzigd op 29/06/2012 12:54:44 door Kris Peeters
het verschil lokaal/niet lokaal snap ik niet echt? Bestaat hier een tutorial over?
HTML 5 zou een zeer goede optie zijn, alleen durf ik dit nog neit echt doen gezien niet alle browers dit ondersteunen.
Groeten,
Olivier
Hier een voorbeeldje hoe het eruit kan zien :
http://77.109.74.20/index.php?action=registreer
(link doet het alleen als mn pc aan staat :P)
Gewijzigd op 29/06/2012 13:30:08 door Patrick vd Pols
Php is een computerprogramma dat draait op de server. Javascript is een programma dat draait op de computer van de gebruiker.
Javascript heeft dus geen verbinding met de server. De gebruiker mag zijn internet afzetten en nog kan javascript perfect werken.
Dat heeft uiteraard gevolgen. Javascript kan niet aan de gegevens van de database, noch aan de php-functies.
Een antwoord op dit gebrek is Ajax. Met Ajax gaat javascript zelf surfen naar de server en kan de server gegevens doorgeven naar javascript.
Ajax geeft je dus de kracht van de server en van de gebruiker samen.
Okay, een voorbeeld, met Ajax, met jQuery.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['username'], $_POST['email'])) {
// Zorg hier zelf voor meer serieuze validatie.
$message = ""; // boodschap die we naar ajax gaan sturen
if ($_POST['username'] == 'Homer') {
$message .= 'Sorry, Homer, this is the "No Homer\'s Club"<br/>';
}
if (! preg_match(
"/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/",
$_POST['email'])) {
$message .= 'No valid e-mail<br/>';
}
// indien $message leeg blijft, is de validatie geslaagd
if (empty($_GET['ajax'])) {
// het formulier wordt gewoon doorgestuurd. Indien $message leeg is, voegen we het record toe.
$sql = "INSERT INTO users ...";
// en zo voort
header('location: ./');
}
else {
// validatie met Ajax.
echo $message; // dit wordt dus naar javascript gestuurd
exit; // verder horen we niets meer te doen op server-niveau
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validatie</title>
</head>
<body>
<h1>Registreer je in de "No Homer's Club"</h1>
<form action="" method="post" id="my_form">
<input id="username" name="username" type="text"/> User Name <br>
<input id="email" name="email" type="text"/> Email <br>
<input type="submit" value="GO" id="submit"/>
</form>
<div id="message"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) { // dit wordt uitgevoerd op het moment dat de pagina geladen is en de DOM klaar is om te gebruiken
// op het moment dat het formulier wordt verzonden, houden we de boel tegen.
$('#my_form').submit(function(e) {
e.preventDefault(); // hiermee zeggen we: wat je ook van plan was te doen ... niet doen. In dit geval dus: het verzenden van het formulier
var my_data = $('#my_form').serialize(); // javascript haalt de gegevens van de velden
$.ajax({
type: "POST",
url: '?ajax=1',
data: my_data,
success: function(data) {
// dit wordt uitgevoerd op het moment dat javascript de Ajax request heeft teruggekregen
$('#message').html(data); // we tonen het bericht, in <div id="message"></div>
}
});
})
})
</script>
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['username'], $_POST['email'])) {
// Zorg hier zelf voor meer serieuze validatie.
$message = ""; // boodschap die we naar ajax gaan sturen
if ($_POST['username'] == 'Homer') {
$message .= 'Sorry, Homer, this is the "No Homer\'s Club"<br/>';
}
if (! preg_match(
"/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/",
$_POST['email'])) {
$message .= 'No valid e-mail<br/>';
}
// indien $message leeg blijft, is de validatie geslaagd
if (empty($_GET['ajax'])) {
// het formulier wordt gewoon doorgestuurd. Indien $message leeg is, voegen we het record toe.
$sql = "INSERT INTO users ...";
// en zo voort
header('location: ./');
}
else {
// validatie met Ajax.
echo $message; // dit wordt dus naar javascript gestuurd
exit; // verder horen we niets meer te doen op server-niveau
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validatie</title>
</head>
<body>
<h1>Registreer je in de "No Homer's Club"</h1>
<form action="" method="post" id="my_form">
<input id="username" name="username" type="text"/> User Name <br>
<input id="email" name="email" type="text"/> Email <br>
<input type="submit" value="GO" id="submit"/>
</form>
<div id="message"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) { // dit wordt uitgevoerd op het moment dat de pagina geladen is en de DOM klaar is om te gebruiken
// op het moment dat het formulier wordt verzonden, houden we de boel tegen.
$('#my_form').submit(function(e) {
e.preventDefault(); // hiermee zeggen we: wat je ook van plan was te doen ... niet doen. In dit geval dus: het verzenden van het formulier
var my_data = $('#my_form').serialize(); // javascript haalt de gegevens van de velden
$.ajax({
type: "POST",
url: '?ajax=1',
data: my_data,
success: function(data) {
// dit wordt uitgevoerd op het moment dat javascript de Ajax request heeft teruggekregen
$('#message').html(data); // we tonen het bericht, in <div id="message"></div>
}
});
})
})
</script>
</body>
</html>