Wie weet hoe ze dit hebben gedaan? foutafhandeling input
Ik had gisteren al een topic gepost over een foutafhandeling en toen kwam ik toevallig vanavond dit tegen.
Bij dit formulier worden de eventuele fouten al gelijk weergegeven bij het verlaten van het input veld. Ik persoonlijk vind dit erg mooi want ik vind het wel eens vervelend als je ergens iets invult en het is verkeerd je dan ook gelijk weer je wachtwoord opnieuw kan invullen en dat heb je dan op deze manier niet.
Bij het contact formulier is het niet te zien maar bij het registratie formulier komt er ook een kruisje te staan in het input veld bij een foutmelding.
Wie weet hoe ze dit gedaan hebben?
https://www.welkoop.nl/klantenservice/contact
Die wordt aangeroepen als iemand zijn focus op een element verliest. Dan wordt een validatie aangeroepen, die een CSS-waarde geeft aan je het veld.
Voor jQuery raad ik de validaion plugin aan:
https://jqueryvalidation.org/files/demo/
Gewijzigd op 27/08/2017 22:40:41 door - Ariën -
Alles werkt inmiddels en ook op de manier die ik wou, alleen.. Ik vraag me af of dit wel DE manier is omdat er best veel code is en dat is dan allemaal per invul veld. Is dit de goede manier?
Het is inmiddels deze controle geworden:
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
$foutv = array();
if(empty($_POST['firstname'])) {
$foutv[] = 'Er is geen voornaam ingevuld.';
unset($first_name);
$fout['input']['firstname'] = TRUE;
}
elseif(!preg_match("/^[a-zA-Z ]*$/", $first_name)){
$foutv[] = "Er is geen correcte voornaam ingevuld.";
unset($first_name);
$fout['input']['firstname'] = TRUE;
}
if(!empty( $foutv ))
{
foreach($foutv as $fout_voornaam){
$fout_voornaam;
}
}
if(empty($_POST['firstname'])) {
$foutv[] = 'Er is geen voornaam ingevuld.';
unset($first_name);
$fout['input']['firstname'] = TRUE;
}
elseif(!preg_match("/^[a-zA-Z ]*$/", $first_name)){
$foutv[] = "Er is geen correcte voornaam ingevuld.";
unset($first_name);
$fout['input']['firstname'] = TRUE;
}
if(!empty( $foutv ))
{
foreach($foutv as $fout_voornaam){
$fout_voornaam;
}
}
En zo wordt die weergegeven achter het input veld:
Gewijzigd op 28/08/2017 23:40:55 door Erwin b
Quote:
Ik kwam er zo snel niet uit hoe ik de foutmelding van email adres bestaat al kon realiseren met de jQuery plugin.
Dan zou je een AJAX-request moeten doen naar een script die de beschikbaarheid van het mailadres controleert. Zo te zien zit er al een event ingebouwd in de jQuery Validation plugin die dit kan dien vanuit een rule.
Gewijzigd op 28/08/2017 23:51:56 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function validateField (field)
{
if (field.value == niet goed) {
field.setCustomValidity('Is niet goed');
return false;
}
else if (field.value == op een andere manier niet in orde) {
field.setCustomValidity('Is ook niet goed');
return false;
}
field.setCustomValidity('');
return true;
}
{
if (field.value == niet goed) {
field.setCustomValidity('Is niet goed');
return false;
}
else if (field.value == op een andere manier niet in orde) {
field.setCustomValidity('Is ook niet goed');
return false;
}
field.setCustomValidity('');
return true;
}
en dan in je formulier
Code (php)
1
<input name="veldnaam" type="text" onchange="validateField(this);">
of zelfs
Code (php)
1
<input name="veldnaam" type="text" onkeyup="validateField(this);" onchange="validateField(this);">
Gewijzigd op 29/08/2017 22:31:36 door Willem vp