[AJAX] Form validation
Ik zat daarstraks met een probleem, dat ik toch kon oplossen. Ik heb een klein script die de checkt of de opgegeven gebruikersnaam al bestaat ja of nee. Ik heb dit opgelost dmv een klein plaatje, aangezien je in een XML object geen HTML tags kan gebruiken.
Om hiermee verder te gaan, wil ik ervoor zorgen dat de gebruiker die zich aanmeld niet verder kan gaan met het invullen van het formulier, als de gebruikersnaam bezet is. En om dáárna nog verder te gaan, wil ik checken of de opgegeven e-mail adressen gelijk zijn en of de opgegeven wachtwoorden gelijk zijn.
Dus alles op een rijtje:
- Als de gebruikersnaam niet is ingevuld of bezet is, moeten de overige inputs worden uitgezet.
- Als de opgegeven e-mail adressen niet kloppen of niet zijn ingevuld, moet de wachtwoord inputs worden uitgezet.
- Als de opgegeven wachtwoorden niet kloppen of niet zijn ingevuld, kan de gebruiker niet op de submit knop registeren klikken.
Aangezien ik me nu nog aan het orienteren ben op het gebied van AJAX en JavaScript, vraag ik jullie hulp. Ik hoop dat jullie ergens nog een dergelijk script hebben liggen of kunnen helpen om dit te realiseren.
Wat ik op dit moment heb is het volgende:
AJAX:
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
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
<script type="text/javascript">
function username_check(userid)
{
if(window.XMLHttpRequest)
{
http = new XMLHttpRequest();
}
else
if(window.ActiveXObject)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('Uw browser is out-of-date!');
}
handle = document.getElementById(userid);
if(handle.value.length > 0)
{
var url = 'check.php?username=' + encodeURIComponent(handle.value);
http.open('GET', url, true);
http.send(null);
http.onreadystatechange = username_result;
}
else
{
document.getElementById('username_result').innerHTML = '';
}
}
function username_result()
{
if(http.readyState == 4)
{
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('username_result').innerHTML = '<img src="../images/gebruikersnaam_'+html+'.png" />';
}
}
</script>
function username_check(userid)
{
if(window.XMLHttpRequest)
{
http = new XMLHttpRequest();
}
else
if(window.ActiveXObject)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('Uw browser is out-of-date!');
}
handle = document.getElementById(userid);
if(handle.value.length > 0)
{
var url = 'check.php?username=' + encodeURIComponent(handle.value);
http.open('GET', url, true);
http.send(null);
http.onreadystatechange = username_result;
}
else
{
document.getElementById('username_result').innerHTML = '';
}
}
function username_result()
{
if(http.readyState == 4)
{
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('username_result').innerHTML = '<img src="../images/gebruikersnaam_'+html+'.png" />';
}
}
</script>
PHP: (check.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
// enkele includes die niet relevant zijn voor jullie :)
if(isset($_GET['username']))
{
$username = mysql_real_escape_string($_GET['username']);
$count = mysql_num_rows(mysql_query("SELECT gebruikersnaam FROM gebruikers WHERE gebruikersnaam = '".$username."'"));
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result>';
if($count)
{
echo 'bezet';
}
else
{
echo 'vrij';
}
echo '</result>';
}
else
{
echo 'Wat probeer jij te doen?';
}
?>
// enkele includes die niet relevant zijn voor jullie :)
if(isset($_GET['username']))
{
$username = mysql_real_escape_string($_GET['username']);
$count = mysql_num_rows(mysql_query("SELECT gebruikersnaam FROM gebruikers WHERE gebruikersnaam = '".$username."'"));
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result>';
if($count)
{
echo 'bezet';
}
else
{
echo 'vrij';
}
echo '</result>';
}
else
{
echo 'Wat probeer jij te doen?';
}
?>
Een online voorbeeld heb ik niet, aangezien het gehele project op mijn laptop staat (localhost dus.) De bijbehorende HTML is als volgt:
Code (php)
1
2
2
<input id="username" style="width:150px" type="text" name="username" onchange="username_check(\'username\')" />
<span id="username_result"></span>
<span id="username_result"></span>
waar de <span> het plaatje laat zien of de gebruikersnaam is bezet ja of nee.
Edit: Voor degenen die het niet zien, in het AJAX script laat hij bij de functie username_result() een plaatje zien, afhankelijk van het XML object laat hij vrij of bezet zien :)
Ik hoor het graag!
Groeten,
Chris H.
(Voor de geinteresseerden, ik ben bezig met een nieuw op te starten community om aan het einde van de dag of gewoon even tussendoor kunt kijken om even te "relaxen" en lachen)
Gewijzigd op 01/01/1970 01:00:00 door - -
http://phphulp.nl/forum/showtopic.php?cat=15&id=50783&page=
Zo gebruik ik Ajax. Het is een voorbeeld dat iets anders doet dan wat jij wil.
Ik gebruik http.responseText ipv. http.responseXML aangezien ik niet met xml werk.
Wat ik zou doen mocht ik jou zijn:
-Zet alle input velde op READONLY, zet de button op disabled
-In je php gedeelte kan je een gecodeerd bericht echo'en, bv 'gelukt' of 'mislukt'.
-in if(http.readyState == 4) zou ik de responseText controleren. Indien de response 'gelukt' is, kan je de readonly af zetten.
Zo kan je steeds verder alles enablen.
Denk er wel aan: vertrouw enkel wat op server kant komt. Ajax en styles kunnen door de gebruiker aangepast worden.
Ik zal eens zoeken of ik nog iets heb dat wat lijkt op een antwoord op je vraag.
Emmanuel:
-Zet alle input velde op READONLY, zet de button op disabled
Kun je dit nader verklaren?
Bedankt voor de overige suggesties, ik ga even kijken of ik wat met http.responseText kan doen!
Code (php)
1
2
2
<input id="email" readonly="readonly" type="text" />
<input id="verzend" disabled="disabled" type="button" value="verzend"/>
<input id="verzend" disabled="disabled" type="button" value="verzend"/>
Met javascript kan je die readonly en disabled dan uit zetten.
Even geduld voor een meer grondige uitleg.
Indien je echt ajax volop wil beheersen, kan je best JSON leren. Dan kan je objecten en arrays uitwisselen tussen php en javascript. Maar ... eerst lopen, dan vliegen.
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
LiveValidation doet dit al voor je.
HTML kan je overigens wel binnen XML gebruiken. Je kan gewoon xhtml gebruiken, en domelements heen en weer duwen (tussen het document in de browser en het document in responseXML) of je gebruikt <![CDATA[<b>je html</b>]]> om een cdata-element in je XML te gooien. Dan kan je de value daarvan via innerHTML in je huidige document opnemen.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
GaMer13 schreef op 26.07.2008 19:23:
... waarom het wiel opnieuw uitvinden als het wiel al uitgevonden is? ...
Omdat je anders zelf nooit iets zal leren misschien.
Emmanuel Delay schreef op 26.07.2008 21:44:
Omdat je anders zelf nooit iets zal leren misschien.
GaMer13 schreef op 26.07.2008 19:23:
... waarom het wiel opnieuw uitvinden als het wiel al uitgevonden is? ...
Omdat je anders zelf nooit iets zal leren misschien.
Dit vind ik een vrij onzinnig antwoord... En het was retorische vraag overigens.
Bij LiveValidation kun je ook een custom function maken, waarbij je dus zelf een callback functie kunt maken. Dit kan handig zijn in jouw geval, want je wilt ook kijken of de gebruiker bestaat. Je kunt in die callback functie een request doen naar een php bestand, vervolgens a.d.h.v. die gegevens true / false terug geven aan LiveValidation.
Hoe heb je het opgelost? En nog iets, maak je nog gebruik van bijv. Jquery of Mootools? Dat maakt het allemaal zeker wel eenvoudiger ;)
Hier toch nog een voorbeeld met JSON.
index.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
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
<?
$ajaxContent = "";
switch ($_GET['pagina'])
{
case 'login':
default:
// formulier
echo '
<html>
<script src="js.js" language="javascript" type="text/javascript"></script>
<head>
<title>Ajax voorbeeldje</title>
<style>
* { margin: 0; padding: 0;}
#menu{height: 400px; width: 150px; padding: 3px; border: 1px solid #555555; float: left;}
#content{height: 400px; width: 500px; padding: 3px; border: 1px solid #555555;}
</style>
</head>
<body >
<li><input type="text" id="naam" onChange="valideer(0);" /> naam </li>
<li><input type="text" id="email" readonly="readonly" onChange="valideer(0);" /> e-mail </li>
<li><input type="button" id="registreer" value="registreer" disabled="disabled" onClick="valideer(1);" /> </li>
</body>
</html>
';
break;
case 'geregistreerd':
echo 'geregistreerd';
break;
case 'valideer':
$ajaxContent = array();
$ajaxContent['naam'] = 0;
$ajaxContent['email'] = 0;
$ajaxContent['geregistreerd'] = 0;
if ($_POST['naam'])
{
// vergelijk naam met login in DB
// indien de naam vrij is:
$ajaxContent['naam'] = 1;
}
if ($_POST['email'] && $ajaxContent['naam'])
{
// vergelijk e-mail met e-mail in DB
// indien de e-mail vrij is:
$ajaxContent['email'] = 1;
}
if ($_POST['verzend'] && $ajaxContent['naam'] && $ajaxContent['email'])
{
// registreer de gebruiker
// $sql = 'INSERT INTO ...'
$ajaxContent['geregistreerd'] = 1;
}
$content ='{"registreer":'. json_encode($ajaxContent) .'}';
echo $content;
break;
}
?>
$ajaxContent = "";
switch ($_GET['pagina'])
{
case 'login':
default:
// formulier
echo '
<html>
<script src="js.js" language="javascript" type="text/javascript"></script>
<head>
<title>Ajax voorbeeldje</title>
<style>
* { margin: 0; padding: 0;}
#menu{height: 400px; width: 150px; padding: 3px; border: 1px solid #555555; float: left;}
#content{height: 400px; width: 500px; padding: 3px; border: 1px solid #555555;}
</style>
</head>
<body >
<li><input type="text" id="naam" onChange="valideer(0);" /> naam </li>
<li><input type="text" id="email" readonly="readonly" onChange="valideer(0);" /> e-mail </li>
<li><input type="button" id="registreer" value="registreer" disabled="disabled" onClick="valideer(1);" /> </li>
</body>
</html>
';
break;
case 'geregistreerd':
echo 'geregistreerd';
break;
case 'valideer':
$ajaxContent = array();
$ajaxContent['naam'] = 0;
$ajaxContent['email'] = 0;
$ajaxContent['geregistreerd'] = 0;
if ($_POST['naam'])
{
// vergelijk naam met login in DB
// indien de naam vrij is:
$ajaxContent['naam'] = 1;
}
if ($_POST['email'] && $ajaxContent['naam'])
{
// vergelijk e-mail met e-mail in DB
// indien de e-mail vrij is:
$ajaxContent['email'] = 1;
}
if ($_POST['verzend'] && $ajaxContent['naam'] && $ajaxContent['email'])
{
// registreer de gebruiker
// $sql = 'INSERT INTO ...'
$ajaxContent['geregistreerd'] = 1;
}
$content ='{"registreer":'. json_encode($ajaxContent) .'}';
echo $content;
break;
}
?>
js.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
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
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
//////////////////////////////////////////////////////
//ajax
var http = null; // global
function createHTTPHandler()
{
httphandler = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest)
{
try
{
httphandler = new XMLHttpRequest();
} catch(e)
{
httphandler = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject)
{
try
{
httphandler = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
httphandler = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
httphandler = false;
}
}
}
return httphandler;
}
/////////////////////////////////////////////////////////////////////////////
// gebruik van Ajax
function handleHttpResponse_registreer()
{
if(http.readyState == 4)
{
document.body.style.cursor = 'auto';
document.getElementById('email').readOnly = true;
document.getElementById('registreer').disabled = true;
var response = eval('(' + http.responseText + ')');
if (response.registreer.naam == 1)
{
document.getElementById('email').readOnly = false;
document.getElementById('email').focus();
}
if (response.registreer.email == 1)
{
document.getElementById('registreer').disabled = false;
document.getElementById('registreer').focus();
}
if (response.registreer.geregistreerd == 1)
{
window.location = "index.php?pagina=geregistreerd";
}
}
else
{
document.body.style.cursor = 'wait';
}
}
function valideer(verzend)
{
http = createHTTPHandler();
var naam = document.getElementById('naam').value;
var email = document.getElementById('email').value;
var passData = 'naam='+escape(naam)+'&email='+escape(email) +'&verzend='+escape(verzend);
http.open("POST", "index.php?pagina=valideer", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponse_registreer;
http.send( passData );
}
//ajax
var http = null; // global
function createHTTPHandler()
{
httphandler = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest)
{
try
{
httphandler = new XMLHttpRequest();
} catch(e)
{
httphandler = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject)
{
try
{
httphandler = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
httphandler = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
httphandler = false;
}
}
}
return httphandler;
}
/////////////////////////////////////////////////////////////////////////////
// gebruik van Ajax
function handleHttpResponse_registreer()
{
if(http.readyState == 4)
{
document.body.style.cursor = 'auto';
document.getElementById('email').readOnly = true;
document.getElementById('registreer').disabled = true;
var response = eval('(' + http.responseText + ')');
if (response.registreer.naam == 1)
{
document.getElementById('email').readOnly = false;
document.getElementById('email').focus();
}
if (response.registreer.email == 1)
{
document.getElementById('registreer').disabled = false;
document.getElementById('registreer').focus();
}
if (response.registreer.geregistreerd == 1)
{
window.location = "index.php?pagina=geregistreerd";
}
}
else
{
document.body.style.cursor = 'wait';
}
}
function valideer(verzend)
{
http = createHTTPHandler();
var naam = document.getElementById('naam').value;
var email = document.getElementById('email').value;
var passData = 'naam='+escape(naam)+'&email='+escape(email) +'&verzend='+escape(verzend);
http.open("POST", "index.php?pagina=valideer", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = handleHttpResponse_registreer;
http.send( passData );
}