Juiste foutafhandeling php
Via de AJAX methode verzend ik gegevens naar een php file en wil als teruggave een bericht met succes of errors tonen.
momenteel heb ik dit
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
<?php
if(trim($_GET['first_name']) == ''){
$first_name_error = '<li class="error">- Het veld voornaam is leeg!</li>';
}else{
}
if(trim($_GET['email']) == ''){
$mail_error = '<li class="error">- Het veld email is leeg!</li>';
}else{
}
$return = array('message' => '<div class="error">'.$first_name_error.$mail_error.'</div>');
echo json_encode($return);
?>
if(trim($_GET['first_name']) == ''){
$first_name_error = '<li class="error">- Het veld voornaam is leeg!</li>';
}else{
}
if(trim($_GET['email']) == ''){
$mail_error = '<li class="error">- Het veld email is leeg!</li>';
}else{
}
$return = array('message' => '<div class="error">'.$first_name_error.$mail_error.'</div>');
echo json_encode($return);
?>
Hoe zouden jullie de foutafhandeling doen?
Ik zou alles in één return willen als dat zou kunnen.
Ik zou het persoonlijk opdelen per veldnaam, en daar dan ook een lijst van fouten toestaan, er kunnen namelijk meerdere dingen mis zijn aan één invoerveld.
Ook kunnen er foutmeldingen zijn met de verwerking van het formulier zelf, die niet direct gekoppeld kunnen worden aan een (zichtbaar) veld, zoals bijvoorbeeld een ongeldig formulier-token. Je zou dus ook nog onderscheid kunnen maken tussen (algemene) formulier-foutmeldingen en (specifieke) formulierveld-foutmeldingen.
Een schematische indeling van het errors-array (evt. verpakt als JSON) zou dus zoiets kunnen zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
* form
- error #1
- error #2
* fields
* field #1
- error #1
* field #2
- error #1
- error #2
etc.
- error #1
- error #2
* fields
* field #1
- error #1
* field #2
- error #1
- error #2
etc.
Zo kun je de foutmeldingen direct achter of bij het specifieke veld weergeven. Of bovenaan het formulier, als het algemene fouten betreft.
Bedoel je het zo
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
$errors = array(
$array(Je bent vergeten je naam in te vullen),
$array(Je bent vergeten je emailadres in te vullen, Dit is geen geldig emailadres)
);
?>
$errors = array(
$array(Je bent vergeten je naam in te vullen),
$array(Je bent vergeten je emailadres in te vullen, Dit is geen geldig emailadres)
);
?>
Gewijzigd op 18/09/2018 21:12:01 door Yoeri Achterbergen
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
$errors = array(
'naam' => 'Je bent vergeten je naam in te vullen',
'email' => 'Je bent vergeten je mailadres in te vullen, Dit is geen geldig mailadres'
);
?>
$errors = array(
'naam' => 'Je bent vergeten je naam in te vullen',
'email' => 'Je bent vergeten je mailadres in te vullen, Dit is geen geldig mailadres'
);
?>
Beter vind ik het om een iets uitgebreider enigszins gestandaardiseerd antwoord te geven:
Code (php)
en als er geen foutmeldingen zijn:
Gewijzigd op 18/09/2018 22:37:18 door Frank Nietbelangrijk
Hoe maak ik dan de juiste en kortste afhandeling met een array?
Ik definieer in een array met de verschillende foutmeldingen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Maak ik dan allemaal if statements voor controle op leeg en eventuele fouten?
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
<?php
if(trim($_GET['first_name']) == ''){
$response['errors']['naamleeg'];
}
if(trim($_GET['email']) == ''){
$response['errors']['emailleeg'];
}
if(trim($_GET['email']) == ''){
$response['errors']['emailleeg'];
}
if(trim($_GET['first_name']) == '') &&trim($_GET['email']) == ''){
$response['errors']['allesleeg'];
}
?>
if(trim($_GET['first_name']) == ''){
$response['errors']['naamleeg'];
}
if(trim($_GET['email']) == ''){
$response['errors']['emailleeg'];
}
if(trim($_GET['email']) == ''){
$response['errors']['emailleeg'];
}
if(trim($_GET['first_name']) == '') &&trim($_GET['email']) == ''){
$response['errors']['allesleeg'];
}
?>
Met de status array kan ik natuurlijk met Javascript ook een if statement maken hoe de errors en de succes worden weergegeven.
Gewijzigd op 18/09/2018 23:36:42 door Yoeri Achterbergen
Ik heb de arrays in groepen gezet en ik denk dat je het zo bedoeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$response = array(
'status' => 'error',
'errors' => array(
'formulierfout' => array(
'allesleeg' => 'Meerdere velden zijn niet ingevuld',
),
'firstname' => array(
'naamleeg' => 'Je bent vergeten je naam in te vullen',
),
'email' => array(
'emailleeg' => 'Je bent vergeten je mailadres in te vullen',
'emailfout' => 'Dit is geen geldig e-mailadres'
)
)
);
?>
?>
$response = array(
'status' => 'error',
'errors' => array(
'formulierfout' => array(
'allesleeg' => 'Meerdere velden zijn niet ingevuld',
),
'firstname' => array(
'naamleeg' => 'Je bent vergeten je naam in te vullen',
),
'email' => array(
'emailleeg' => 'Je bent vergeten je mailadres in te vullen',
'emailfout' => 'Dit is geen geldig e-mailadres'
)
)
);
?>
?>
Gewijzigd op 19/09/2018 10:37:46 door Yoeri Achterbergen
Dus nog even voor de duidelijkheid:
- De arrays zijn gemaakt en zijn dus ook makkelijk toe te voegen en aan te passen.
- Met de status kan ik Javasript de opmaak laten bepalen door een if else statement te maken.
- Voor de foutafhandeling in PHP maak ik voor elk veld + elke error een if statemant en geen de $response de juiste array mee die word terug geven aan Javascript.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
if(response.status == 'error') {
var html = '<ul class="errors">';
for(var i = 0 ; i < response.errors.length ; i++) {
html += '<li>' + response.errors[i] + '</li>';
}
html += '<ul>';
een_bepaalde_div.innerHTML = html;
} else if(response.status == 'ok') {
// do whatever you want
}
var html = '<ul class="errors">';
for(var i = 0 ; i < response.errors.length ; i++) {
html += '<li>' + response.errors[i] + '</li>';
}
html += '<ul>';
een_bepaalde_div.innerHTML = html;
} else if(response.status == 'ok') {
// do whatever you want
}
en met css geef je de foutmelding de gewenste stijl.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.errors {
/* style voor de unsorted list */
}
.errors li {
/* style voor de list items */
}
/* style voor de unsorted list */
}
.errors li {
/* style voor de list items */
}
Toevoeging op 19/09/2018 12:34:03:
p.s het voorbeeld werkt met de simpelere array uit mijn eerste reactie. als je de array's onderverdeeld per formulier veld dan wordt het wat uitgebreider.
Gewijzigd op 19/09/2018 12:34:47 door Frank Nietbelangrijk
En misschien is het ook verstandig om of uitsluitend engels of nederlands te gebruiken in code, maar niet een of andere mengvorm.
Ook zou je kunnen overwegen om een Boolean mee te geven voor de status in de vorm van hasErrors true/false, dan hoef je niet expliciet een vergelijking te doen met een statustekst. Dit hangt natuurlijk ook af van wat je verder met de response(s) wilt doen.
Het betreft een aanmeld formulier waarbij de voornaam en email gebruikt gaan worden.
Het formulier verstuur ik via de AJAX methode:
<input class="register-field" name="first_name" type="text"/>
<input class="register-field" name="email" type="email"/>
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
<script type="text/javascript">
$(document).ready(function(){
$(".register-field-submit").click(function(event){
event.preventDefault();
$.ajax({
cache: false,
url:"register.php",
data:$("#registernp").serialize(),
success: function (data){
$('#target').html(data.message).fadeIn();
}
})
;
});
});
</script>
$(document).ready(function(){
$(".register-field-submit").click(function(event){
event.preventDefault();
$.ajax({
cache: false,
url:"register.php",
data:$("#registernp").serialize(),
success: function (data){
$('#target').html(data.message).fadeIn();
}
})
;
});
});
</script>
Als er errors zijn dan wil ik deze terug geven zoals boven uitgelegd.
Als alles correct is wil ik dat de naam en emailadres worden teruggeven.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
header('Content-Type: application/json; charset=UTF-8');
if(trim($_GET['first_name']) == ''){
$response = array(
'status' => 'false',
'errors' => array(
'formerror' => array(
'empty' => 'Meerdere velden zijn niet ingevuld',
),
),
);
}else{
$response = array('status' => 'true');
}
echo json_encode($response);
?>
?>
header('Content-Type: application/json; charset=UTF-8');
if(trim($_GET['first_name']) == ''){
$response = array(
'status' => 'false',
'errors' => array(
'formerror' => array(
'empty' => 'Meerdere velden zijn niet ingevuld',
),
),
);
}else{
$response = array('status' => 'true');
}
echo json_encode($response);
?>
?>
de Javascript ziet er zo uit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function(){
$(".register-field-submit").click(function(event){
event.preventDefault();
$.ajax({
cache: false,
url:"register.php",
data:$("#registernp").serialize(),
success: function (data){
if(data.status == 'false') {
$('#target').html('<span style="background-color:red;">'+data.errors+'</span>').fadeIn();
}else{
$('#target').html('<span style="background-color:green;">Gelukt</span>').fadeIn();
}
}
})
});
});
</script>
$(document).ready(function(){
$(".register-field-submit").click(function(event){
event.preventDefault();
$.ajax({
cache: false,
url:"register.php",
data:$("#registernp").serialize(),
success: function (data){
if(data.status == 'false') {
$('#target').html('<span style="background-color:red;">'+data.errors+'</span>').fadeIn();
}else{
$('#target').html('<span style="background-color:green;">Gelukt</span>').fadeIn();
}
}
})
});
});
</script>
Als ik het veld leeg laat geeft hij false terug en zou hij ook de errors moeten laten zien, maar hij geeft nu "[object Object]" terug.
Toevoeging op 19/09/2018 21:53:39:
Als ik de console.log gebruik geeft hij dit weer: {formerror: {empty: "Meerdere velden zijn niet ingevuld"}}
Statussen zoals ok en error worden door veel developers toegepast overigens dus trek je niet alles aan. Voordeel is ook dat je meerdere mogelijkheden hebt dan alleen true en false.
Denk aan een payprovider die de status van een betaling doorgeeft met Open, Payed, Cancelled, Denied enz.
(Thomas waarom moet het altijd zo ingewikkeld? al zijn het suggesties die je geeft.)
Gewijzigd op 19/09/2018 22:22:24 door Frank Nietbelangrijk
dank voor de goede tips :) heb de statussen een andere waarde gegeven.
Je hebt het over een lus maken bedoel je dan een loop zoals je al eerder aangaf zoals
Code (php)
1
2
2
for(var i = 0 ; i < response.errors.length ; i++) {
}
}
Je zult je array moeten wijzigen in
Code (php)
en zo benaderen in javascript
Code (php)
1
2
3
4
5
6
2
3
4
5
6
// in json
var data = {"status":"failure","errors":{"formerrors":["Meerdere velden zijn niet ingevuld","nog een foutmelding"]}};
for(var i = 0 ; i < data.errors.formerrors.length; i++) {
console.log(data.errors.formerrors[i]);
}
var data = {"status":"failure","errors":{"formerrors":["Meerdere velden zijn niet ingevuld","nog een foutmelding"]}};
for(var i = 0 ; i < data.errors.formerrors.length; i++) {
console.log(data.errors.formerrors[i]);
}
Toevoeging op 19/09/2018 23:00:34:
https://codepen.io/anon/pen/mGaaRg
Gewijzigd op 19/09/2018 22:57:06 door Frank Nietbelangrijk
Nu heb ik nog één vraag betreft de juiste foutafhandeling:
Als ik meerde controles uitvoer dan word de array overschreven tot er geen meer is.
Hoe kan ik toch meerdere controles uitvoeren met een return array
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
if(trim($_GET['first_name']) && trim($_GET['email']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Je bent vergeten je naam in te vullen',
'Zonder emailadres kunnen wij geen e-mail sturen',
),
);
}
if(trim($_GET['first_name']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Je bent vergeten je naam in te vullen',
),
);
}
if(trim($_GET['email']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Zonder emailadres kunnen wij geen e-mail sturen',
),
);
}
?>
if(trim($_GET['first_name']) && trim($_GET['email']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Je bent vergeten je naam in te vullen',
'Zonder emailadres kunnen wij geen e-mail sturen',
),
);
}
if(trim($_GET['first_name']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Je bent vergeten je naam in te vullen',
),
);
}
if(trim($_GET['email']) == ''){
$response = array(
'status' => 'error',
'errors' => array(
'Zonder emailadres kunnen wij geen e-mail sturen',
),
);
}
?>
Of zit ik niet verkeerd?
Don't
Repeat
Yourself
Dus enkel de variabelen defineren per controlestatement en aan het eind je array genereren.
Lijn 6 en 7 zijn twee aparte foutmeldingen. Maar moeten dit geen twee zinnen in een error zijn?
Gewijzigd op 20/09/2018 10:14:03 door - Ariën -
lijn 6 en 7 zijn inderdaad 2 aparte foutmeldingen, dit omdat er op 2 velden word gecontroleerd of er iets is ingevuld
Met de bovenstaande loop van Frank worden deze netjes terug gecommuniceerd. Omdat ik met een array werk word deze steeds herschreven waardoor ik niet alle errors terug krijg maar enkel de laatste (wat logisch is).
De DRY-methode ga ik even opzoeken of het gaat wat ik zou willen
Toevoeging op 20/09/2018 12:35:01:
Met die variabelen werkt prima voor mij:)
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
header('Content-Type: application/json; charset=UTF-8');
$emptyfirstname = "";
$lengthfirstname ="";
$emptymail = "";
if(trim($_GET['first_name']) == ''){
$emptyfirstname = 'Je bent vergeten je naam in te vullen';
}elseif(strlen($_GET['first_name']) <= 1){
$lengthfirstname = 'Een naam met 1 letter bestaat niet';
}
if(trim($_GET['email']) == ''){
$emptymail = 'Zonder emailadres kunnen wij geen e-mail sturen';
}
$response = array(
'status' => 'error',
'errors' => array(
$emptyfirstname,
$lengthfirstname,
$emptymail,
),
);
echo json_encode($response);
?>
header('Content-Type: application/json; charset=UTF-8');
$emptyfirstname = "";
$lengthfirstname ="";
$emptymail = "";
if(trim($_GET['first_name']) == ''){
$emptyfirstname = 'Je bent vergeten je naam in te vullen';
}elseif(strlen($_GET['first_name']) <= 1){
$lengthfirstname = 'Een naam met 1 letter bestaat niet';
}
if(trim($_GET['email']) == ''){
$emptymail = 'Zonder emailadres kunnen wij geen e-mail sturen';
}
$response = array(
'status' => 'error',
'errors' => array(
$emptyfirstname,
$lengthfirstname,
$emptymail,
),
);
echo json_encode($response);
?>
Gewijzigd op 20/09/2018 14:42:39 door Yoeri Achterbergen