De PHPhulp kroeg
undifined index...
Mijn script zegt dat hij $_POST['password'] niet kan vinden, dat vind ik eigenlijk best logisch want ik heb hem niet met de jquery meegegeven naar die $_GET...
code:
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="inputCheckGroup">
<div class="inputGroup">
<img src="<?=ICON?>/eye_close.png" class="ShowPassword">
<input class="awe" type="password" name="password" id="password">
<label>Password</label>
</div>
<span class="inputCheck"></span>
</div>
<div class="inputCheckGroup">
<div class="inputGroup">
<img src="<?=ICON?>/eye_close.png" class="ShowPassword">
<input class="awe" type="password" name="rePassword" id="rePassword">
<label>Repeat Password</label>
</div>
<span class="inputCheck"></span>
</div>
<div class="inputGroup">
<img src="<?=ICON?>/eye_close.png" class="ShowPassword">
<input class="awe" type="password" name="password" id="password">
<label>Password</label>
</div>
<span class="inputCheck"></span>
</div>
<div class="inputCheckGroup">
<div class="inputGroup">
<img src="<?=ICON?>/eye_close.png" class="ShowPassword">
<input class="awe" type="password" name="rePassword" id="rePassword">
<label>Repeat Password</label>
</div>
<span class="inputCheck"></span>
</div>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
if ($_GET['action'] == "checkPassword") {
if (empty($_POST['password'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password may not be empty.</a><?
} else if (strlen($_POST['password']) < 6) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password must have 6 or more characters.</a><?
} else if (strlen($_POST['password']) > 30) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password may not be longer then 30 characters.</a><?
} else if (!preg_match('/[\'^£$%&*()}{@#~?\>\<\>,|=_+¬-]+/', $_POST['password'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password must have letters numbers and special chars.</a><?
} else {
?><img class="inputCheckImg" src="<?=ICON?>tick.png"><?
}
}
if ($_GET['action'] == "checkRePassword") {
if (empty($_POST['rePassword'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">This field can not be empty.</a><?
} else if ($_POST['password'] !== $_POST['rePassword']) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">The password doesn\'t match.</a><?
} else {
?><img class="inputCheckImg" src="<?=ICON?>tick.png"><?
}
}
?>
if ($_GET['action'] == "checkPassword") {
if (empty($_POST['password'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password may not be empty.</a><?
} else if (strlen($_POST['password']) < 6) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password must have 6 or more characters.</a><?
} else if (strlen($_POST['password']) > 30) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password may not be longer then 30 characters.</a><?
} else if (!preg_match('/[\'^£$%&*()}{@#~?\>\<\>,|=_+¬-]+/', $_POST['password'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">Password must have letters numbers and special chars.</a><?
} else {
?><img class="inputCheckImg" src="<?=ICON?>tick.png"><?
}
}
if ($_GET['action'] == "checkRePassword") {
if (empty($_POST['rePassword'])) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">This field can not be empty.</a><?
} else if ($_POST['password'] !== $_POST['rePassword']) {
?><img class="inputCheckImg" src="<?=ICON?>cross.png"><a class="inputCheckCross">The password doesn\'t match.</a><?
} else {
?><img class="inputCheckImg" src="<?=ICON?>tick.png"><?
}
}
?>
JQUERY:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$("input#password").on("keyup", function(){
var inputData = $(this);
$.ajax({
method: "POST",
url: "registerHandler.php?action=checkPassword",
data: inputData
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
});
$("input#rePassword").on("keyup", function(){
var inputData = $(this);
$.ajax({
method: "POST",
url: "registerHandler.php?action=checkRePassword",
data: inputData
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
});
var inputData = $(this);
$.ajax({
method: "POST",
url: "registerHandler.php?action=checkPassword",
data: inputData
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
});
$("input#rePassword").on("keyup", function(){
var inputData = $(this);
$.ajax({
method: "POST",
url: "registerHandler.php?action=checkRePassword",
data: inputData
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
});
Het is dus..
Ik geef eerder de $_POST['password'] wel mee. alleen kan ik die later niet opvragen in de $_GET['action'] == checkRePassword.
Omdat ik hem dus niet meegeef in de jquery.
Maar op welke manier zou ik die wel kunnen meegeven zodat ik kan checken of ze gelijk zijn!?
Groet,
Mathieu.
Gewijzigd op 22/03/2015 00:36:55 door Mathieu Posthumus
Maar $_GET en $_POST kun je gewoon door elkaar gebruiken.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$.ajax({
method: "POST",
url: "registerHandler.php?action=checkRePassword",
data: "name": name
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
method: "POST",
url: "registerHandler.php?action=checkRePassword",
data: "name": name
}).done(function(data){
$(inputData).parent().next().empty().append(data);
});
registerHandler.php:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
$action = $_GET['action'];
$name = $_POST['name'];
?>
$action = $_GET['action'];
$name = $_POST['name'];
?>
Daarnaast wil ik nog opmerken dat een ajax call overbodig is. Wat je nu in PHP doet kun je gewoon in javascript maken.
Gewijzigd op 22/03/2015 11:18:57 door Frank Nietbelangrijk
Gewijzigd op 22/03/2015 11:18:19 door Frank Nietbelangrijk
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Captain Anonymous</title>
</head>
<body>
<div class="inputCheckGroup">
<div class="inputGroup">
<img id="img-pw1" src="http://png-1.findicons.com/files/icons/1156/fugue/16/hourglass.png" />
<input class="awe" type="password" name="password" id="password">
<label>Password</label>
</div>
<span class="inputCheck"></span>
</div>
<div class="inputCheckGroup">
<div class="inputGroup">
<img id="img-pw2" src="http://png-1.findicons.com/files/icons/1156/fugue/16/hourglass.png" />
<input class="awe" type="password" name="rePassword" id="rePassword">
<label>Repeat Password</label>
</div>
<span class="inputCheck"></span>
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Captain Anonymous</title>
</head>
<body>
<div class="inputCheckGroup">
<div class="inputGroup">
<img id="img-pw1" src="http://png-1.findicons.com/files/icons/1156/fugue/16/hourglass.png" />
<input class="awe" type="password" name="password" id="password">
<label>Password</label>
</div>
<span class="inputCheck"></span>
</div>
<div class="inputCheckGroup">
<div class="inputGroup">
<img id="img-pw2" src="http://png-1.findicons.com/files/icons/1156/fugue/16/hourglass.png" />
<input class="awe" type="password" name="rePassword" id="rePassword">
<label>Repeat Password</label>
</div>
<span class="inputCheck"></span>
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.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
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
$( document ).ready(function() {
// initialisatie
// image urls
var imgOk = "http://png-1.findicons.com/files/icons/2564/max_mini_icon/16/valid.png";
var imgWrong = "http://png-3.findicons.com/files/icons/1156/fugue/16/cross_script.png";
// formfields
var pw = $("input[type=password]"); // beiden password fields
var pw1 = $("input#password");
var pw2 = $("input#rePassword");
// images
var imgPw1 = $("#img-pw1");
var imgPw2 = $("#img-pw2");
// functies
function validatepw1(val)
{
if(val.length < 6)
return false;
if(val.length > 30)
return false;
return true;
}
function validatepw2(val)
{
var val1 = pw1.val();
if(val == val1) {
if(validatepw1(val1)) // als pw1 niet goed is dan is pw2 ook niet goed
return true;
}
return false;
}
// events
// event keyup voor beiden password fields
pw.on("keyup", function(){
// controleer password 1
if(validatepw1(pw1.val())) {
imgPw1.attr('src', imgOk);
imgPw1.attr('title', 'Paswoord is goedgekeurd');
}
else {
imgPw1.attr('src', imgWrong);
imgPw1.attr('title', 'Paswoord moet minimaal zes en maximaal dertig tekens lang zijn');
}
// controleer password 2 enkel als deze niet leeg is.
if(pw2.val().length > 0) {
if(validatepw2(pw2.val())) {
imgPw2.attr('src', imgOk);
imgPw2.attr('title', 'Paswoorden zijn gelijk');
}
else {
imgPw2.attr('src', imgWrong);
imgPw2.attr('title', 'Paswoorden zijn niet hetzelfde');
}
}
});
});
// initialisatie
// image urls
var imgOk = "http://png-1.findicons.com/files/icons/2564/max_mini_icon/16/valid.png";
var imgWrong = "http://png-3.findicons.com/files/icons/1156/fugue/16/cross_script.png";
// formfields
var pw = $("input[type=password]"); // beiden password fields
var pw1 = $("input#password");
var pw2 = $("input#rePassword");
// images
var imgPw1 = $("#img-pw1");
var imgPw2 = $("#img-pw2");
// functies
function validatepw1(val)
{
if(val.length < 6)
return false;
if(val.length > 30)
return false;
return true;
}
function validatepw2(val)
{
var val1 = pw1.val();
if(val == val1) {
if(validatepw1(val1)) // als pw1 niet goed is dan is pw2 ook niet goed
return true;
}
return false;
}
// events
// event keyup voor beiden password fields
pw.on("keyup", function(){
// controleer password 1
if(validatepw1(pw1.val())) {
imgPw1.attr('src', imgOk);
imgPw1.attr('title', 'Paswoord is goedgekeurd');
}
else {
imgPw1.attr('src', imgWrong);
imgPw1.attr('title', 'Paswoord moet minimaal zes en maximaal dertig tekens lang zijn');
}
// controleer password 2 enkel als deze niet leeg is.
if(pw2.val().length > 0) {
if(validatepw2(pw2.val())) {
imgPw2.attr('src', imgOk);
imgPw2.attr('title', 'Paswoorden zijn gelijk');
}
else {
imgPw2.attr('src', imgWrong);
imgPw2.attr('title', 'Paswoorden zijn niet hetzelfde');
}
}
});
});
Toevoeging op 22/03/2015 14:04:05:
Even aanvullend: Dit is dan een javascript validatie en dat is prima en vooral gebruiksvriendelijk maar ook makkelijk te omzeilen. Het is dus geen vervanging voor de validatie in PHP! In PHP moet je ook de velden (blijven) valideren.
Gewijzigd op 22/03/2015 13:49:03 door Frank Nietbelangrijk