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.
Kijk eens naar het onBlur event, of de .blur() functie in jQuery.
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.
Ik kwam er zo snel niet uit hoe ik de foutmelding van email adres bestaat al kon realiseren met de jQuery plugin. Daarom voorlopig nog even op de "ouderwetse" manier.
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:
$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;
}
}
En zo wordt die weergegeven achter het input veld:
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.
Dat is snel :) Bedankt, ik ga kijken hoe een AJAX-request werkt. Is bovenstaande de goede manier? Nu is het een registratie formuliertje met maar 5 veldjes maar het lijkt me veel code voor grote formulieren.
In vanilla JavaScript zou je iets als dit kunnen doen:
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;
}
