Live check login/email beschikbaar
Ik heb mijn inlog systeem en nu zou ik graag, bij aanmaken nieuwe leden, een controle hebben of het nieuwe emailadres welke dient om in te loggen al in gebruik is of niet. Hoe pak ik dit aan?
Alle hulp is welkom :) praktische links met voorbeelden ook.
Jan
PS: Dit zijn mijn velden in de tabel email: `ID` int(11) NOT NULL,`email` varchar(40)
Gewijzigd op 12/11/2012 08:00:48 door Jan R
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply){
if(reply.valid) {
//wel valid
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply){
if(reply.valid) {
//wel valid
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
</script>
Dan heb je dus 'validateEmail.php':
Code (php)
Gewijzigd op 12/11/2012 08:36:03 door Bo Ter Ham
Hoe kijkt hij met jou stukje of het email adres al bestaat in de database?
Wat ik lees is dat hij eerst wil kijken of het email adres al voorkomt bij andere gebruikers, dat lukt dus niet met jou stukje code.
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
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
<?php
include ("inc/connect.php");
if( !empty($_POST['email']))
{
$sql = "SELECT 1 FROM tabel WHERE email = '" . $_POST['email'] . '";';
$res = mysqli_query($mysqli, $sql);
if($res !== false)
{
$res = mysqli_fetch_array($res);
if($res[0] == 1)
{
$data = 'true - Emailadres is beschikbaar.';
}
else
{
$data = 'false - Emailadres is al geregisteerd.';
}
}
else
{
$data = 'false - Er ging iets mis met de query.';
}
}
else
{
$data = 'false - Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
include ("inc/connect.php");
if( !empty($_POST['email']))
{
$sql = "SELECT 1 FROM tabel WHERE email = '" . $_POST['email'] . '";';
$res = mysqli_query($mysqli, $sql);
if($res !== false)
{
$res = mysqli_fetch_array($res);
if($res[0] == 1)
{
$data = 'true - Emailadres is beschikbaar.';
}
else
{
$data = 'false - Emailadres is al geregisteerd.';
}
}
else
{
$data = 'false - Er ging iets mis met de query.';
}
}
else
{
$data = 'false - Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
Gewijzigd op 12/11/2012 09:08:50 door Eddy E
Ik zal met jouw code verder doen.
Je creëert nogal veel trafiek met de server als je telkens reageert bij elke keyUp.
Laat ons ten minste op javascript-niveau controleren of het e-mailadres goed geformateerd is.
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
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
<script type="text/javascript">
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
/**
* @see http://jquerybyexample.blogspot.com/2011/04/validate-email-address-using-jquery.html
* Voel je vrij om een andere functie te gebruiken; ik heb de eerste genomen die ik vond
*/
function isValidEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
return false;
}
</script>
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
/**
* @see http://jquerybyexample.blogspot.com/2011/04/validate-email-address-using-jquery.html
* Voel je vrij om een andere functie te gebruiken; ik heb de eerste genomen die ik vond
*/
function isValidEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
return false;
}
</script>
... Lijn 17 en lijn 20: daar kan eventueel iets gebeuren wat meer 'zinnig' is.
----
Je kan kijken naar de code van Eddy, voor het server-deel.
Op 1 ding na:
De javascript-code verwacht niet een string, maar een object (in JSON-notatie); met (boolean) $data->valid en (string) $data->message
Ik denk dat het hiermee moet werken:
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
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
<?php
include ("inc/connect.php");
$data = new stdClass();
$data->valid = false; // standaard op false
$data->message = "";
if( !empty($_POST['email']))
{
$sql = "SELECT 1 FROM tabel WHERE email = '" . mysql_real_escape_string($_POST['email']) . '";';
$res = mysqli_query($mysqli, $sql);
if($res !== false)
{
$res = mysqli_fetch_array($res);
if($res[0] == 1)
{
$data->valid = true;
$data->message = 'Emailadres is beschikbaar.';
}
else
{
$data->message = 'Emailadres is al geregisteerd.';
}
}
else
{
$data->message = 'Er ging iets mis met de query.';
}
}
else
{
$data->message = 'Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
include ("inc/connect.php");
$data = new stdClass();
$data->valid = false; // standaard op false
$data->message = "";
if( !empty($_POST['email']))
{
$sql = "SELECT 1 FROM tabel WHERE email = '" . mysql_real_escape_string($_POST['email']) . '";';
$res = mysqli_query($mysqli, $sql);
if($res !== false)
{
$res = mysqli_fetch_array($res);
if($res[0] == 1)
{
$data->valid = true;
$data->message = 'Emailadres is beschikbaar.';
}
else
{
$data->message = 'Emailadres is al geregisteerd.';
}
}
else
{
$data->message = 'Er ging iets mis met de query.';
}
}
else
{
$data->message = 'Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
Gewijzigd op 12/11/2012 11:48:54 door Kris Peeters
Gezien ik (nog) niets ken van jquey en ajax(of is dit hetzelfde?) ga ik hier eens dieper naar kijken in het verlof binnen een paar weken. Nu werkt alles zoals het hoort en anders misschien niet meer :)
Alvast allemaal bedankt om mee te denken.
Jan
Ik heb, nu ik in verlof ben, eindelijk tijd gevonden om verder te kijken.
Na een beetje prutsen is het gelukt!(er zaten een paar " en ' verkeerd om bij Eddy :) zo blijf ik toch alert :))
Bedankt allemaal
Er is wel een klein probleempje. alles pinkt bij wijzigen van de input
De eindcode
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Test login bestaat al
</title>
<META http-equiv="Content-Type" content="text/html; charset=us-ascii">
<META NAME="AUTHOR" CONTENT="JanR">
<META NAME="LANGUAGE" CONTENT="Dutch">
<LINK id="style" HREF="style.css" rel="stylesheet" type="text/css">
<LINK id="style" HREF="invoer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$('#emailMessage').html("");
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
/**
* @see http://jquerybyexample.blogspot.com/2011/04/validate-email-address-using-jquery.html
* Voel je vrij om een andere functie te gebruiken; ik heb de eerste genomen die ik vond
*/
function isValidEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
return false;
}
function isValidEmailBad(email) {
var y=email;
var n=y.split("\r\n");
for (z in n)
{
var x = n[z];
if (x != ""){
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
return false;
}
return true;
}
}
}
</script>
</head>
<body>
<form name="test" id="test">
<label><b>email</b></label><input type="text" value="@" id="email" name="email" >
<div id="emailMessage" name="emailMessage" style="width:1200px; display: inline;" ></div><br><br>
</form>
</body>
</head>
<html>
<head>
<title>
Test login bestaat al
</title>
<META http-equiv="Content-Type" content="text/html; charset=us-ascii">
<META NAME="AUTHOR" CONTENT="JanR">
<META NAME="LANGUAGE" CONTENT="Dutch">
<LINK id="style" HREF="style.css" rel="stylesheet" type="text/css">
<LINK id="style" HREF="invoer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#email').keyup(function() {
var email = $(this).val();
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$('#emailMessage').html("");
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
});
});
/**
* @see http://jquerybyexample.blogspot.com/2011/04/validate-email-address-using-jquery.html
* Voel je vrij om een andere functie te gebruiken; ik heb de eerste genomen die ik vond
*/
function isValidEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
return false;
}
function isValidEmailBad(email) {
var y=email;
var n=y.split("\r\n");
for (z in n)
{
var x = n[z];
if (x != ""){
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
return false;
}
return true;
}
}
}
</script>
</head>
<body>
<form name="test" id="test">
<label><b>email</b></label><input type="text" value="@" id="email" name="email" >
<div id="emailMessage" name="emailMessage" style="width:1200px; display: inline;" ></div><br><br>
</form>
</body>
</head>
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
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
<?php
include ("opendb.php");
$data = new stdClass();
$data->valid = false; // standaard op false
$data->message = "";
$email=$_POST['email'];
if( !empty($email))
{
$sql = "SELECT 1 FROM emails WHERE email = '" . mysql_real_escape_string($email) . "';";
$res = mysql_query($sql);
if($res !== false)
{
list($res)= mysql_fetch_row($res);
// $res = mysq_fetch_array($res);
if($res != 1)
{
$data->valid = true;
$data->message = 'Emailadres is beschikbaar.';
}
else
{
$data->message = 'Emailadres is al geregisteerd.';
}
}
else
{
echo $sql."<br>";
echo mysql_error()."<br><br><br>";
$data->message = 'Er ging iets mis met de query.';
}
}
else
{
$data->message = 'Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
include ("opendb.php");
$data = new stdClass();
$data->valid = false; // standaard op false
$data->message = "";
$email=$_POST['email'];
if( !empty($email))
{
$sql = "SELECT 1 FROM emails WHERE email = '" . mysql_real_escape_string($email) . "';";
$res = mysql_query($sql);
if($res !== false)
{
list($res)= mysql_fetch_row($res);
// $res = mysq_fetch_array($res);
if($res != 1)
{
$data->valid = true;
$data->message = 'Emailadres is beschikbaar.';
}
else
{
$data->message = 'Emailadres is al geregisteerd.';
}
}
else
{
echo $sql."<br>";
echo mysql_error()."<br><br><br>";
$data->message = 'Er ging iets mis met de query.';
}
}
else
{
$data->message = 'Je hebt geen e-mail adres ingevuld.';
}
echo json_encode($data);
?>
http://www.janr.be/test/login_exist_test.zip
Wel een vervolg hierop.
Eddy gebruikte mysqli. Wat is het voordeel/verschil met mysql_connect.
Ik heb wel alles omgezet naar mysql dus zonder de i omdat ik dat al een beetje ken
Jan
Gewijzigd op 20/12/2012 11:55:30 door Jan R
Jan R op 20/12/2012 11:53:27:
...Er is wel een klein probleempje. alles pinkt bij wijzigen van de input...
Daar bestaat iets voor.
De meeste van de uitleg heb ik tussen de code gezet.
Wat we doen: wanneer een gebruiker heel vlug 5 karakters typt, heb je niets aan de eerste 4 keyUp's; je wil gewoon een controle op het moment dat de gebruiker (even) stopt met typen.
Dat gaan we doen. We triggeren de ajax call met een vertraging van 400 milliseconden. Als er tijdens die 400 ms activiteit is, annuleren we die call met clearTimeout.
Verder herken je je code; ik heb er amper aan geraakt.
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
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
$(document).ready(function() {
// we gaan een vertraging zetten op de keyup.
// pas wanneer de gebruiker een bepaald aantal milliseconden inactief is (gestopt met typen), gaan we de functionaliteit uitvoeren.
var timer = null;
var timerTime = 400; // pas aan naar eigen smaak
$('#email').keyup(function() {
clearTimeout(timer); // negeer de vorige keyUp. Enkel de laatste wordt behandeld
var email = $(this).val(); // binnen de setTimeout is 'this' niet meer zomaar bruikbaar; we cachen ze
timer = setTimeout(function() {
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$('#emailMessage').html("");
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
}, timerTime); // setTimeout
});
});
// we gaan een vertraging zetten op de keyup.
// pas wanneer de gebruiker een bepaald aantal milliseconden inactief is (gestopt met typen), gaan we de functionaliteit uitvoeren.
var timer = null;
var timerTime = 400; // pas aan naar eigen smaak
$('#email').keyup(function() {
clearTimeout(timer); // negeer de vorige keyUp. Enkel de laatste wordt behandeld
var email = $(this).val(); // binnen de setTimeout is 'this' niet meer zomaar bruikbaar; we cachen ze
timer = setTimeout(function() {
if (!isValidEmail(email)) {
$('#emailMessage').html("e-mailadres is niet geldig");
return true;
}
$('#emailMessage').html("");
$.ajax({
url: 'validateEmail.php',
type: "POST",
dataType: "json",
data: ({email: email}),
success: function(reply) {
if(reply.valid) {
//wel valid. Zie zelf wat je hier doet
$('#emailMessage').html(reply.message);
}
else {
$('#emailMessage').html(reply.message);
}
}
});
}, timerTime); // setTimeout
});
});
Het zal je trouwens veel data trafiek besparen
Gewijzigd op 20/12/2012 12:58:59 door Kris Peeters
Bijvoorbeeld:
$.post('script.php', {email: email}, function(result){
// doe iets met je result (json)
}, 'json');
Je moet het trouwens niet zien als langere code (je doet uiteraard wat je wil); ik zie het als "een object-notatie gebruiken".
Heel transparant, heel duidelijk; je vult in wat je nodig hebt.
Of wat anders gezegd: jij moet de volgorde van de parameters onthouden, ik moet de key onthouden.
bedankt maar weer :)