form-generation-en-validation
Gesponsorde koppelingen
PHP script bestanden
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php
session_start ();
ini_set ('display_errors', 1);
error_reporting (E_ALL);
// om te checken of er al iets gepost is
$posted = $_SERVER['REQUEST_METHOD'] == 'POST';
// deze is voor de paginatitel en de h1 bovenaan de pagina
$title = 'Jan Koehoorn | Form Generation and Validation';
// deze is voor de style van de div met de eerste alinea en het form
// als alles correct is ingevuld maken we de div onzichtbaar met display: none
$form_style = '';
// de eigenschappen voor de velden
// in dit script kun je alleen maar type text gebruiken, maar je kunt het zelf
// uitbreiden met radio's, checkboxen en selects
$fields = array (
'naam' => array ('type' => 'text', 'required' => true, 'regex' => false, 'extrainfo' => false),
'adres' => array ('type' => 'text', 'required' => true, 'regex' => false, 'extrainfo' => false),
'postcode' => array ('type' => 'text', 'required' => true, 'regex' => '/^[1-9]{1}[0-9]{3}\s?[A-Za-z]{2}$/', 'extrainfo' => 'bijv: 1234 AB'),
'woonplaats' => array ('type' => 'text', 'required' => false, 'regex' => false, 'extrainfo' => false),
'telefoon' => array ('type' => 'text', 'required' => false, 'regex' => '/^(\d{2}-?\d{8}|d{3}-?\d{7}|\d{4}-?\d{6})$/', 'extrainfo' => 'bijv: 012-3456789')
);
$antispam = array (
'form_validation1.jpg' => 'hond',
'form_validation2.jpg' => 'kikker',
'form_validation3.jpg' => 'slang',
'form_validation4.jpg' => 'tijger'
);
if (!$posted) {
$_SESSION['check'] = mt_rand (1, 4);
}
// voorlopig is alles nog okee ...
$form_ok = true;
// hierin slaan we de XHTML voor de formuliervelden op
$form_html = '';
// XHTML voor de formuliervelden genereren
foreach ($fields as $field => $options) {
// voor de beginners; hier gebruik ik de zogenaamde "Verkorte if-else" notatie. Die werkt zo:
// WAARDE = (IF CONSTRUCTIE) ? (WAAR) : (ONWAAR);
$value = (isset ($_POST[$field])) ? (trim ($_POST[$field])) : ('');
$form_html .= PHP_EOL;
$form_html .= '<p>';
if ($options['extrainfo']) {
$form_html .= '<span class="extrainfo">' . $options['extrainfo'] . '</span>';
}
$asterisk = ($options['required']) ? ('* ') : ('');
$form_html .= '<label for="' . $field . '">' . $asterisk . $field . ':</label>';
$form_html .= '<input id="' . $field . '" name="' . $field . '" type="' . $options['type'] . '" value="' . $value . '" />';
if ($options['required'] && $posted) {
if (empty ($value)) {
$form_html .= '<span class="error">Dit is een verplicht veld</span>';
$form_ok = false;
}
}
if ($options['regex'] && $posted && !empty ($value)) {
if (!preg_match ($options['regex'], $value)) {
$form_html .= '<span class="error">Ongeldige waarde voor ' . $field . '</span>';
$form_ok = false;
}
}
$form_html .= '</p>';
}
// kleine check inbouwen
if ($posted) {
$check = strtolower (trim ($_POST['check']));
if ($check != $antispam['form_validation' . $_SESSION['check'] . '.jpg']) {
$form_ok = false;
$check_error = '<span class="error">Vul het goede dier in</span>';
}
}
$form_html .= PHP_EOL;
$form_html .= '<p>';
$form_html .= '<label for="check">wat voor dier is dit?</label>';
$form_html .= '<input id="check" name="check" type="text" value="" />';
if (isset ($check_error)) {
$form_html .= $check_error;
}
$form_html .= '</p>';
$form_html .= PHP_EOL;
$form_html .= '<p>';
$form_html .= '<img alt="check" class="check" src="form_validation' . $_SESSION['check'] . '.jpg" />';
$form_html .= '</p>';
// alles goed gegaan? Dan formulier-div onzichtbaar maken en een boodschap naar de user sturen
if ($posted && $form_ok) {
$form_style = ' style="display: none;"';
if (isset ($_SESSION['dubbelpost'])) {
$msg = '<h2>Het formulies IS al gepost. Deze pagina niet verversen a.u.b.</h2>';
$msg .= '<p>Geposte waarden:</p>';
$msg .= '<pre>' . print_r ($_POST, true) . '</pre>';
}
else {
$_SESSION['dubbelpost'] = true;
$msg = '<h2>Bedankt voor het invullen van het formulier</h2>';
$msg .= '<p>Geposte waarden:</p>';
$msg .= '<pre>' . print_r ($_POST, true) . '</pre>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jan Koehoorn | <?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="oop.css" />
<style type="text/css">
form {margin: 10px 0;}
form p {width: 100%; position: relative; z-index: 1;}
span.extrainfo {position: absolute; left: 260px; top: 2px; padding: 4px; background: #ffc; border: 1px solid #993; font-size: 11px; line-height: normal; display: none; z-index: 2;}
form p:hover span.extrainfo {display: block;}
label {float: left; width: 140px; text-align: right; padding-right: 5px;}
input#submit,
img.check {margin-left: 144px;}
img.check {border: 1px solid #ccc;}
span.error {font-weight: bold; color: #f66; padding-left: 5px;}
p, label, input {font: 12px/24px Verdana, Arial, Helvetica, sans-serif;}
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc);}
input {line-height: normal;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<h1><?php echo $title; ?></h1>
<?php
if (isset ($msg)) {
echo $msg;
}
?>
<div id="form"<?php echo $form_style; ?>>
<p>Vul onderstaand formulier in. Velden met een * zijn verplicht.</p>
<form method="post" action="form_validation.php">
<?php echo $form_html; ?>
<p>
<input id="submit" type="submit" value="verzenden" />
</p>
</form>
</div>
</div>
</body>
</html>
session_start ();
ini_set ('display_errors', 1);
error_reporting (E_ALL);
// om te checken of er al iets gepost is
$posted = $_SERVER['REQUEST_METHOD'] == 'POST';
// deze is voor de paginatitel en de h1 bovenaan de pagina
$title = 'Jan Koehoorn | Form Generation and Validation';
// deze is voor de style van de div met de eerste alinea en het form
// als alles correct is ingevuld maken we de div onzichtbaar met display: none
$form_style = '';
// de eigenschappen voor de velden
// in dit script kun je alleen maar type text gebruiken, maar je kunt het zelf
// uitbreiden met radio's, checkboxen en selects
$fields = array (
'naam' => array ('type' => 'text', 'required' => true, 'regex' => false, 'extrainfo' => false),
'adres' => array ('type' => 'text', 'required' => true, 'regex' => false, 'extrainfo' => false),
'postcode' => array ('type' => 'text', 'required' => true, 'regex' => '/^[1-9]{1}[0-9]{3}\s?[A-Za-z]{2}$/', 'extrainfo' => 'bijv: 1234 AB'),
'woonplaats' => array ('type' => 'text', 'required' => false, 'regex' => false, 'extrainfo' => false),
'telefoon' => array ('type' => 'text', 'required' => false, 'regex' => '/^(\d{2}-?\d{8}|d{3}-?\d{7}|\d{4}-?\d{6})$/', 'extrainfo' => 'bijv: 012-3456789')
);
$antispam = array (
'form_validation1.jpg' => 'hond',
'form_validation2.jpg' => 'kikker',
'form_validation3.jpg' => 'slang',
'form_validation4.jpg' => 'tijger'
);
if (!$posted) {
$_SESSION['check'] = mt_rand (1, 4);
}
// voorlopig is alles nog okee ...
$form_ok = true;
// hierin slaan we de XHTML voor de formuliervelden op
$form_html = '';
// XHTML voor de formuliervelden genereren
foreach ($fields as $field => $options) {
// voor de beginners; hier gebruik ik de zogenaamde "Verkorte if-else" notatie. Die werkt zo:
// WAARDE = (IF CONSTRUCTIE) ? (WAAR) : (ONWAAR);
$value = (isset ($_POST[$field])) ? (trim ($_POST[$field])) : ('');
$form_html .= PHP_EOL;
$form_html .= '<p>';
if ($options['extrainfo']) {
$form_html .= '<span class="extrainfo">' . $options['extrainfo'] . '</span>';
}
$asterisk = ($options['required']) ? ('* ') : ('');
$form_html .= '<label for="' . $field . '">' . $asterisk . $field . ':</label>';
$form_html .= '<input id="' . $field . '" name="' . $field . '" type="' . $options['type'] . '" value="' . $value . '" />';
if ($options['required'] && $posted) {
if (empty ($value)) {
$form_html .= '<span class="error">Dit is een verplicht veld</span>';
$form_ok = false;
}
}
if ($options['regex'] && $posted && !empty ($value)) {
if (!preg_match ($options['regex'], $value)) {
$form_html .= '<span class="error">Ongeldige waarde voor ' . $field . '</span>';
$form_ok = false;
}
}
$form_html .= '</p>';
}
// kleine check inbouwen
if ($posted) {
$check = strtolower (trim ($_POST['check']));
if ($check != $antispam['form_validation' . $_SESSION['check'] . '.jpg']) {
$form_ok = false;
$check_error = '<span class="error">Vul het goede dier in</span>';
}
}
$form_html .= PHP_EOL;
$form_html .= '<p>';
$form_html .= '<label for="check">wat voor dier is dit?</label>';
$form_html .= '<input id="check" name="check" type="text" value="" />';
if (isset ($check_error)) {
$form_html .= $check_error;
}
$form_html .= '</p>';
$form_html .= PHP_EOL;
$form_html .= '<p>';
$form_html .= '<img alt="check" class="check" src="form_validation' . $_SESSION['check'] . '.jpg" />';
$form_html .= '</p>';
// alles goed gegaan? Dan formulier-div onzichtbaar maken en een boodschap naar de user sturen
if ($posted && $form_ok) {
$form_style = ' style="display: none;"';
if (isset ($_SESSION['dubbelpost'])) {
$msg = '<h2>Het formulies IS al gepost. Deze pagina niet verversen a.u.b.</h2>';
$msg .= '<p>Geposte waarden:</p>';
$msg .= '<pre>' . print_r ($_POST, true) . '</pre>';
}
else {
$_SESSION['dubbelpost'] = true;
$msg = '<h2>Bedankt voor het invullen van het formulier</h2>';
$msg .= '<p>Geposte waarden:</p>';
$msg .= '<pre>' . print_r ($_POST, true) . '</pre>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jan Koehoorn | <?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="oop.css" />
<style type="text/css">
form {margin: 10px 0;}
form p {width: 100%; position: relative; z-index: 1;}
span.extrainfo {position: absolute; left: 260px; top: 2px; padding: 4px; background: #ffc; border: 1px solid #993; font-size: 11px; line-height: normal; display: none; z-index: 2;}
form p:hover span.extrainfo {display: block;}
label {float: left; width: 140px; text-align: right; padding-right: 5px;}
input#submit,
img.check {margin-left: 144px;}
img.check {border: 1px solid #ccc;}
span.error {font-weight: bold; color: #f66; padding-left: 5px;}
p, label, input {font: 12px/24px Verdana, Arial, Helvetica, sans-serif;}
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc);}
input {line-height: normal;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<h1><?php echo $title; ?></h1>
<?php
if (isset ($msg)) {
echo $msg;
}
?>
<div id="form"<?php echo $form_style; ?>>
<p>Vul onderstaand formulier in. Velden met een * zijn verplicht.</p>
<form method="post" action="form_validation.php">
<?php echo $form_html; ?>
<p>
<input id="submit" type="submit" value="verzenden" />
</p>
</form>
</div>
</div>
</body>
</html>