Jquery validatie

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/

One thought on “Jquery validatie

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s