Ajax Request
Bij het registreren wil ik graag dat er gelijk weer wordt gegeven of de gebruikersnaam al bestaat, of wanneer je gebruikersnaam characters bevat die niet zijn toegestaan.
Daarvoor heb ik het volgende, maar wanneer ik een gebruikersnaam intyp blijft het op 'Controleren' staan, ik heb bij de ajax request de error afhandeling toegevoegd en die gaf weer [Object object]
Hoe laat ik dit werken?
register.php
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
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
<?php
// Include Needed Files
include_once('includes/classes.inc.php');
include_once('includes/functions.inc.php');
include_once('includes/headers.inc.php');
// Set Page Settings
$page->setTitle('Home');
// Include Layout Head
include_once('content/head.con.php');
include_once('content/stylesheets.con.php');
include_style('select.css');
include_once('content/scripts.con.php');
include_script('select.js');
include_script('validation.js');
// Include Navigation
include_once('content/navigation.con.php');
$page->navigation('loggedOut');
$page->navigation('advertisments');
// Include Layout Body
include_once('content/body.con.php');
$page->textboxHead('Avickum', 'red');
$page->text('<form method="POST" novalidate="novalidate">');
$page->text(' <table id="register">');
$page->text(' <tr>');
$page->text(' <th>Gebruikersnaam</th>');
$page->text(' <td><input id="register-username" type="text" name="username" tabindex="1" placeholder="Gebruikersnaam"></td>');
$page->text(' <td><p id="register-username-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>E-mail</th>');
$page->text(' <td><input id="register-email" type="email" name="email" tabindex="2" placeholder="E-mail"></td>');
$page->text(' <td><p id="register-email-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Geslacht</th>');
$page->text(' <td>');
$page->text(' <select id="register-gender" data-placeholder="Kies je geslacht" name="gender" tabindex="3">');
$page->text(' <option value=""></option>');
$page->text(' <option value="male">Jongen</option>');
$page->text(' <option value="female">Meisje</option>');
$page->text(' </select>');
$page->text(' </td>');
$page->text(' <td><p id="register-gender-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Geboortedatum</th>');
$page->text(' <td>');
$page->text(' <select id="register-day" data-placeholder="Dag" name="day" tabindex="4">');
$page->text(' <option value=""></option>');
for ($i = 1; $i < 32; $i++)
{
$page->text(' <option value="' . $i . '">' . $i . '</option>');
}
$page->text(' </select>');
$page->text(' <select id="register-month" data-placeholder="Maand" name="month" tabindex="5">');
$page->text(' <option value=""></option>');
$page->text(' <option value="1">Januari</option>');
$page->text(' <option value="2">Februari</option>');
$page->text(' <option value="3">Maart</option>');
$page->text(' <option value="4">April</option>');
$page->text(' <option value="5">Mei</option>');
$page->text(' <option value="6">Juni</option>');
$page->text(' <option value="7">Juli</option>');
$page->text(' <option value="8">Augustus</option>');
$page->text(' <option value="9">September</option>');
$page->text(' <option value="10">Oktober</option>');
$page->text(' <option value="11">November</option>');
$page->text(' <option value="12">December</option>');
$page->text(' </select>');
$page->text(' <select id="register-year" data-placeholder="Jaar" name="year" tabindex="6">');
$page->text(' <option value=""></option>');
for ($i = date('Y'); $i > 1899; $i--)
{
$page->text(' <option value="' . $i . '">' . $i . '</option>');
}
$page->text(' </select>');
$page->text(' </td>');
$page->text(' <td><p id="register-birthday-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Wachtwoord</th>');
$page->text(' <td><input id="register-password" type="password" name="password" tabindex="7" placeholder="Wachtwoord"></td>');
$page->text(' <td><p id="register-password-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th></th>');
$page->text(' <td><input id="register-password-check" type="password" name="password-check" tabindex="8" placeholder="Wachtwoord (Nogmaals)"></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th></th>');
$page->text(' <td><input id="register-submit" type="submit" name="register" tabindex="9" value="Registreren"></td>');
$page->text(' </tr>');
$page->text(' </table>');
$page->text('</form>');
$page->textboxFoot();
// Inlude Layout Foot
include_once('content/foot.con.php');
?>
// Include Needed Files
include_once('includes/classes.inc.php');
include_once('includes/functions.inc.php');
include_once('includes/headers.inc.php');
// Set Page Settings
$page->setTitle('Home');
// Include Layout Head
include_once('content/head.con.php');
include_once('content/stylesheets.con.php');
include_style('select.css');
include_once('content/scripts.con.php');
include_script('select.js');
include_script('validation.js');
// Include Navigation
include_once('content/navigation.con.php');
$page->navigation('loggedOut');
$page->navigation('advertisments');
// Include Layout Body
include_once('content/body.con.php');
$page->textboxHead('Avickum', 'red');
$page->text('<form method="POST" novalidate="novalidate">');
$page->text(' <table id="register">');
$page->text(' <tr>');
$page->text(' <th>Gebruikersnaam</th>');
$page->text(' <td><input id="register-username" type="text" name="username" tabindex="1" placeholder="Gebruikersnaam"></td>');
$page->text(' <td><p id="register-username-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>E-mail</th>');
$page->text(' <td><input id="register-email" type="email" name="email" tabindex="2" placeholder="E-mail"></td>');
$page->text(' <td><p id="register-email-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Geslacht</th>');
$page->text(' <td>');
$page->text(' <select id="register-gender" data-placeholder="Kies je geslacht" name="gender" tabindex="3">');
$page->text(' <option value=""></option>');
$page->text(' <option value="male">Jongen</option>');
$page->text(' <option value="female">Meisje</option>');
$page->text(' </select>');
$page->text(' </td>');
$page->text(' <td><p id="register-gender-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Geboortedatum</th>');
$page->text(' <td>');
$page->text(' <select id="register-day" data-placeholder="Dag" name="day" tabindex="4">');
$page->text(' <option value=""></option>');
for ($i = 1; $i < 32; $i++)
{
$page->text(' <option value="' . $i . '">' . $i . '</option>');
}
$page->text(' </select>');
$page->text(' <select id="register-month" data-placeholder="Maand" name="month" tabindex="5">');
$page->text(' <option value=""></option>');
$page->text(' <option value="1">Januari</option>');
$page->text(' <option value="2">Februari</option>');
$page->text(' <option value="3">Maart</option>');
$page->text(' <option value="4">April</option>');
$page->text(' <option value="5">Mei</option>');
$page->text(' <option value="6">Juni</option>');
$page->text(' <option value="7">Juli</option>');
$page->text(' <option value="8">Augustus</option>');
$page->text(' <option value="9">September</option>');
$page->text(' <option value="10">Oktober</option>');
$page->text(' <option value="11">November</option>');
$page->text(' <option value="12">December</option>');
$page->text(' </select>');
$page->text(' <select id="register-year" data-placeholder="Jaar" name="year" tabindex="6">');
$page->text(' <option value=""></option>');
for ($i = date('Y'); $i > 1899; $i--)
{
$page->text(' <option value="' . $i . '">' . $i . '</option>');
}
$page->text(' </select>');
$page->text(' </td>');
$page->text(' <td><p id="register-birthday-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th>Wachtwoord</th>');
$page->text(' <td><input id="register-password" type="password" name="password" tabindex="7" placeholder="Wachtwoord"></td>');
$page->text(' <td><p id="register-password-error">Error afhandeling</p></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th></th>');
$page->text(' <td><input id="register-password-check" type="password" name="password-check" tabindex="8" placeholder="Wachtwoord (Nogmaals)"></td>');
$page->text(' </tr>');
$page->text(' <tr>');
$page->text(' <th></th>');
$page->text(' <td><input id="register-submit" type="submit" name="register" tabindex="9" value="Registreren"></td>');
$page->text(' </tr>');
$page->text(' </table>');
$page->text('</form>');
$page->textboxFoot();
// Inlude Layout Foot
include_once('content/foot.con.php');
?>
/content/js/validation.js
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
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
jQuery(document).ready(function()
{
var validateUsername = jQuery('#register-username-error');
jQuery('#register-username').keyup(function()
{
var t = this;
if (this.value != this.lastValue)
{
if (this.timer)
{
clearTimeout(this.timer);
}
validateUsername.html('Controleren...');
this.timer = setTimeout(function()
{
jQuery.ajax(
{
url: 'content/validate.con.php',
data: 'action=check_username&username=' + t.value,
dataType: 'json',
type: 'post',
success: function(j)
{
validateUsername.html(j.msg);
},
});
}, 200);
this.lastValue = this.value;
}
});
});
{
var validateUsername = jQuery('#register-username-error');
jQuery('#register-username').keyup(function()
{
var t = this;
if (this.value != this.lastValue)
{
if (this.timer)
{
clearTimeout(this.timer);
}
validateUsername.html('Controleren...');
this.timer = setTimeout(function()
{
jQuery.ajax(
{
url: 'content/validate.con.php',
data: 'action=check_username&username=' + t.value,
dataType: 'json',
type: 'post',
success: function(j)
{
validateUsername.html(j.msg);
},
});
}, 200);
this.lastValue = this.value;
}
});
});
/content/validate.con.php
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
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
<?php
function check_username($username)
{
$username = trim($username);
$response = array();
if (!$username)
{
$response = array(
'ok' => false,
'msg' => 'Please specify a username'
);
}
else if (!preg_match('/^[a-z0-9.-_]+$/', $username))
{
$response = array(
'ok' => false,
'msg' => 'Your username can only contain alphanumerics and period, dash and underscore (.-_)'
);
}
else if (username_taken($username))
{
$response = array(
'ok' => false,
'msg' => 'The selected username is not available'
);
}
else
{
$response = array(
'ok' => true,
'msg' => 'This username is free'
);
}
return $response;
}
if (@$_REQUEST['action'] == 'check_username' && isset($_SERVER['HTTP_X_REQUESTED_WITH']))
{
echo json_encode(check_username($_REQUEST['username']));
exit;
}
?>
function check_username($username)
{
$username = trim($username);
$response = array();
if (!$username)
{
$response = array(
'ok' => false,
'msg' => 'Please specify a username'
);
}
else if (!preg_match('/^[a-z0-9.-_]+$/', $username))
{
$response = array(
'ok' => false,
'msg' => 'Your username can only contain alphanumerics and period, dash and underscore (.-_)'
);
}
else if (username_taken($username))
{
$response = array(
'ok' => false,
'msg' => 'The selected username is not available'
);
}
else
{
$response = array(
'ok' => true,
'msg' => 'This username is free'
);
}
return $response;
}
if (@$_REQUEST['action'] == 'check_username' && isset($_SERVER['HTTP_X_REQUESTED_WITH']))
{
echo json_encode(check_username($_REQUEST['username']));
exit;
}
?>
Alvast bedankt!
Ik zou die 200ms nog iets ruimer nemen, 3 of 400ms ( hoe wel ... de snelheid waarmee de jeugd tegenwoordig kan typen... :) )
Ik heb een aantal dingen aangepast.
De indentering is de stijl die ik het liefst heb, maar dat is een kwestie van smaak. Zie zelf maar.
Ik heb er iets Stand alone van gemaakt kwestie van het zo te kunnen testen. Uiteraard zal je dat terug uit mekaar moeten trekken.
Wat mij betreft werkt het.
Een aantal dingen:
- this.lastValue staat me niet zo aan. Het kan aan mij liggen, maar ik heb deze constructie nog niet gezien. Misschien vergis ik mij en is dit een goede manier om gegevens aan this toe te voegen.
- De data van het formulier - zeker met POST - geef ik liever mee in object-notatie ipv.
data: 'action=check_username&username=' + t.value,
Trouwens, ik escape de waarde eerst. Zeker met jouw notatie zou het fout kunnen lopen als er vreemde tekens worden meegestuurd
- $_REQUEST. Ik zie $_REQUEST niet graag. $_REQUEST is een merge van GET en POST-waarden. Nergens voor nodig. Als je weet dat het POST is, gebruik dan POST. dito met GET
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
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
<?php
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && isset($_POST['action']) && $_POST['action'] === 'check_username') {
echo json_encode(check_username($_POST['username']));
exit;
}
function username_taken($a) { // ik veronderstel dat dit bij jou vergeleken wordt met een waarde in de db...
if (strtolower($a) === 'john') {
return true;
}
return false;
}
function check_username($username) {
$username = trim($username);
$response = array();
if (!$username) {
$response = array(
'ok' => false,
'msg' => 'Please specify a username'
);
}
else if (!preg_match('/^[a-z0-9.-_]+$/', $username)) {
$response = array(
'ok' => false,
'msg' => 'Your username can only contain alphanumerics and period, dash and underscore (.-_)'
);
}
else if (username_taken($username)) {
$response = array(
'ok' => false,
'msg' => 'The selected username is not available'
);
}
else {
$response = array(
'ok' => true,
'msg' => 'This username is free'
);
}
return $response;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<input id="register-username" type="text" name="username" tabindex="1" placeholder="Gebruikersnaam">
<p id="register-username-error">Error afhandeling</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>
jQuery(document).ready(function($) {
var validateUsername = $('#register-username-error');
var lastValue = '';
$('#register-username').keyup(function() {
var t = this;
if (this.value != lastValue) {
if (this.timer) {
clearTimeout(this.timer);
}
validateUsername.html('Controleren...');
this.timer = setTimeout(function() {
$.ajax({
url: window.location, // ik doe dit nu om dit stand alone te testen ... alles op de zelfde pagina
data: {
action: 'check_username',
username: escape($(t).val())
}, // ik heb liever deze notatie. Het laat ook meer ruimte voor extra manipulatie van de gegevens. Bv. escapen
dataType: 'json',
type: 'post',
success: function(j) {
validateUsername.html(j.msg);
},
});
}, 200);
lastValue = this.value;
}
});
});
</script>
</body>
</html>
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && isset($_POST['action']) && $_POST['action'] === 'check_username') {
echo json_encode(check_username($_POST['username']));
exit;
}
function username_taken($a) { // ik veronderstel dat dit bij jou vergeleken wordt met een waarde in de db...
if (strtolower($a) === 'john') {
return true;
}
return false;
}
function check_username($username) {
$username = trim($username);
$response = array();
if (!$username) {
$response = array(
'ok' => false,
'msg' => 'Please specify a username'
);
}
else if (!preg_match('/^[a-z0-9.-_]+$/', $username)) {
$response = array(
'ok' => false,
'msg' => 'Your username can only contain alphanumerics and period, dash and underscore (.-_)'
);
}
else if (username_taken($username)) {
$response = array(
'ok' => false,
'msg' => 'The selected username is not available'
);
}
else {
$response = array(
'ok' => true,
'msg' => 'This username is free'
);
}
return $response;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<input id="register-username" type="text" name="username" tabindex="1" placeholder="Gebruikersnaam">
<p id="register-username-error">Error afhandeling</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>
jQuery(document).ready(function($) {
var validateUsername = $('#register-username-error');
var lastValue = '';
$('#register-username').keyup(function() {
var t = this;
if (this.value != lastValue) {
if (this.timer) {
clearTimeout(this.timer);
}
validateUsername.html('Controleren...');
this.timer = setTimeout(function() {
$.ajax({
url: window.location, // ik doe dit nu om dit stand alone te testen ... alles op de zelfde pagina
data: {
action: 'check_username',
username: escape($(t).val())
}, // ik heb liever deze notatie. Het laat ook meer ruimte voor extra manipulatie van de gegevens. Bv. escapen
dataType: 'json',
type: 'post',
success: function(j) {
validateUsername.html(j.msg);
},
});
}, 200);
lastValue = this.value;
}
});
});
</script>
</body>
</html>
Gewijzigd op 14/11/2012 13:47:13 door Kris Peeters