Client side validatie. In een ASP.Net webforms applicatie gebruik je er gemakkelijk een Validation control voor, maar er zijn ook nog andere manieren, ook handig als je bv in een ASP.Net MVC applicatie werkt.
Hoe werkt Jquery validatie?
Je geeft van je input velden op je form aan wat de restricties zijn op die velden, je geeft aan welke meldingen er bij het overtreden van de restricties getoond moeten worden, je bind het validate event aan je form en klaar ben je.
Hoe ziet dat er dan uit?
$(document).ready(function() {
var validator = $("form:first").validate({
validClass: "success",
rules: {
Email: {
required: true,
email: true
}
,
Voorletters: required
,
Achternaam: {
required: true,
minlength: 2
}
}
,
messages:{
Email: {
required: "Email adres is verplicht",
email: "Het email adres moet de opmaak <a href="mailto:'naam@domein.nl'">'naam@domein.nl'</a> hebben"
}
,
Voorletters: "Voorletters zijn verplicht"
,
Achternaam: {
required: true,
minlength: 2
}
}
});
});
In de eerste regel
var validator = $("form:first").validate({
Wordt het validatie framework’s validate event aan het eerste (en in mijn geval enige) form’s submit event gekoppeld.
De validClass bewaren we voor later, en vervolgens zien we dat we van het veld Email (<input id=”Email” name=”Email” type=”text” value=”" />) zeggen dat het verplicht is (required) en dat het een ‘email’ veld is. Aangezien email inmiddels redelijk ingeburgerd is, is het eigenlijk wel logisch dat het inmiddels als een soort datatype wordt gebruikt. Zo zijn er ook datatatypes voor getallen, datum, creditcard, url etc.
Vervolgens zeggen we in 1 regel dat het voorletters veld verplicht is en dat het achternaam veld verplicht is en een minimale lengte heeft van 2 karakters.
Alle validatie regels worden verpakt in het onderdeel ‘rules’.
Vervolgens komen de teksten die getoond moeten worden als de validatie niet voldoet. Standaard zijn dit Engelse teksten maar het is wel mooier als je die in het Nederlands weergeeft.
Je kunt voor alle validaties die je eerder hebt aangegeven een tekst weergeven.
Hebben we eerder gezegd dat het veld ‘email’ required is, dan kunnen we hier voor die validatie een tekst weergeven.
Bij het ‘achternaam’ veld kunnen we de gekozen waarde in de minimale lengte validatie, hier ‘2′, ook nog tonen in de melding door de jquery.format functie te gebruiken.
Alle melding teksten worden verpakt in het onderdeel ‘messages’.
Het resultaat ziet er als volgt uit:
Het volgende voorbeeld kwam naar voren toen ik op meerdere (gelijke) velden dezelfde validatie wilde gebruiken. Vooral als het een dynamisch aantal is,bv soms 3 en soms 20, dan kun je niet 1 voor 1 de velden gaan benoemen.
Dan is het handiger om al deze velden dezelfde ‘class’ te geven en aan deze ‘class’ een validatie te hangen:
$(document).ready(function() {
var validator = $("form:first").validate({
validClass: "success"
});
$.validator.addMethod("cMinlength", $.validator.methods.range, $.format("{0} tot {1}"));
$.validator.addClassRules("waardering", { cMinlength: [1,10] });
});
We zien weer dat we aan het eerste form een validate event koppelen en dat we aan de validator een nieuwe methode toevoegen. Dat is een eigen methode zoals required of email al bestaat die we dan later aan een control kunnen koppelen.
Hier maken we een eigen methode die we cMinlength noemen en die van het standaard type range is. Daarna geven we de message weer die getoond moet worden als het veld niet aan de validatie voldoet.
Vervolgens koppelen we deze methode, met de parameters voor de range methode namelijk minimaal 1 en maximaal 10, aan alle controls die een class attribuut waardering hebben. (<input id=”waardering1″ class=”waardering” name=”waardering1″ type=”text” value=”" />)
Tot slot het stukje validclass:”succes”
In 1 van de voorbeelden over Jquery validation stond dit genoemd: laat niet alleen fouten zien, maar laat ook zien als een veld wel voldoet aan de validatie.
Met deze regel code wordt de css style ’succes’ aan elk veld toegevoegd dat de validatie succesvol doorloopt.
Als we deze css gebruiken
input[type="text"].success {
background: url("/Resources/checked.gif") no-repeat center left;
padding-left: 15px;
width: 185px;
}
dan ziet een goed ingevuld veld er zo uit:
Tot slot de pagina van het Jquery validation framework:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Je ziet ‘m steeds vaker, helemaal als je met barcodes bezig bent er een beetje op let (ik zit op dit moment op een project bij een klant die veel met RFID en barcodes doet, dus automatisch gaat dan je aandacht meer naar verschijnselen ervan in de dagelijkse pratijk uit).
‘k moet zeggen dat ik in eerste instantie niet stond te springen om weer een nieuw soort framework: Jquery.