Figuur 1, Weergave van de RequiredFieldValidator nadat op de knop geklikt is
Als uw pagina een formulier bevat is de kans groot dat bepaalde velden verplicht zijn en dat ingevoerde waardes aan bepaalde criteria moeten voldoen. Een email-adres bijvoorbeeld heeft een bepaalde structuur, en u wilt alleen email adressen opslaan die ook daadwerkelijk kloppen. Nu zou u de waardes kunnen controleren als er een postback plaatsvindt en u de waardes gaat gebruiken, maar ASP.NET heeft daarvoor een verzameling server controls die dit veel makkelijker maken. We noemen deze server controls validatie controls. In een visuele design omgeving kunt u deze controls gewoon op de pagina slepen en aangeven welk veld gevalideerd moet worden, en kunt u dus zonder ook maar een regel code te schrijven zorgen dat ingevoerde waardes correct zijn. Er zijn vijf verschillende validatie controls, en een server control om de foutmeldingen in te groeperen. De server controls die hier behandeld worden zijn:
De RequiredFieldValidator control controleert of een bepaalde control een waarde bevat. Heeft de control geen waarde, dan zorgt de RequiredFieldValidator dat de pagina niet afgehandeld wordt, en dat er een foutmelding in de pagina wordt weergegeven. Het enige dat u hoeft te doen is aangeven welke server control gevalideerd moet worden, en wat de foutmelding moet zijn als het veld niet ingevuld is. De eigenschappen hiervoor vindt u in tabel 1. De opmaak eigenschappen zijn besproken bij de Label control, maar er moet wel opgemerkt worden dan de foutmelding van alle validatie controls standaard rood is.
| Eigenschap | Omschrijving |
| ControlToValidate | De naam van de server control die gevalideerd moet worden. |
| Display | Bepaalt hoe de foutmelding wordt weergegeven. De mogelijkheden zijn Static (standaard) voor weergave waarbij de ruimte voor de foutmelding al gereserveerd is zodat er geen verschuivingen in de opmaak plaatsvinden, Dynamic voor weergave waarbij de foutmelding ingevoegd wordt en de opmaak daar eventueel aan wordt aangepast, en None voor geen foutmelding. In het laatste geval kunt de foutmelding eventueel weergeven in de ValidationSummary control. |
| EnableClientScript | Geeft aan of validatie in de webbrowser gedaan wordt voordat een postback plaatsvindt. Als dit aan staat (standaard) dan zal er geen postback gebeuren voordat de waardes in alle server controls correct zijn. De waarde kan True (standaard) of False zijn. Noot: Validatie op de server gebeurt altijd, om te voorkomen dat iemand de validatie in de webbrowser omzeilt. |
| ErrorMessage | De foutmelding die moet worden weergegeven. Dit is in principe hetzelfde als Text. |
| InitialValue | De oorspronkelijke waarde van de server control die gevalideerd moet worden. Alleen als de server control deze waarde heeft, geeft de RequiredFieldValidator de foutmelding weer. Standaard is dit een lege waarde. |
De belangrijkste eigenschappen in tabel 1 zijn ControlToValidate en ErrorMessage. Zonder die twee eigenschappen is de RequiredFieldValidator nutteloos. De code hieronder laat zien hoe u deze eigenschappen gebruikt. De Display eigenschap wordt later besproken.
<html>
<head>
</head>
<body> <form runat="server">
<p>
Email:
<asp:TextBox id="Email" runat="server"></asp:TextBox>
<asp:Button id="Inschrijven" runat="server" Text="Inschrijven">
</asp:Button>
<br />
<asp:RequiredFieldValidator id="EmailVerplicht" runat="server"
ErrorMessage="U heeft geen email ingevuld."
ControlToValidate="Email">
</asp:RequiredFieldValidator>
</p>
</form>
</body>
</html>
De code hierboven geeft een TextBox control weer waarin de gebruiker een email adres moet invullen. Merk op dat we de TextBox control de naam Email gegeven hebben, zodat we weten wat erin staat. Dit is ook makkelijker als u met validatie controls werkt, omdat het meteen duidelijk is op welke server control de validatie control(s) van toepassing zijn. Vooral in een formulier met veel velden kan dit erg belangrijk zijn. De RequiredFieldValidator hebben we een naam gegeven die aangeeft wat het controleert, namelijk EmailVerplicht. Verder geeft ControlToValidate aan dat we het de Email TextBox moet valideren, en is er een foutmelding gedefiniδerd. U hoeft bij de HTML-code geen gebeurteniscode te gebruiken om te controleren of er een waarde in de TextBox is ingevuld, de code werkt zo al. Het resultaat ziet u in figuur 1.
Figuur 1, Weergave van de RequiredFieldValidator nadat op de knop geklikt is
De CompareValidator control vergelijkt de waardes van twee server controls, of van een server control en een bepaalde waarde. Standaard kijkt de CompareValidator of de waardes gelijk zijn, en geeft een foutmelding als dit niet zo is. U kunt de CompareValidator echter ook zo instellen dat de waardes moeten verschillen, of controleert of de ene waarde groter is dan de ander. Behalve de eigenschap InitialValue, heeft de CompareValidator dezelfde eigenschappen als de RequiredFieldValidator. Verder heeft het ook de eigenschappen zoals vermeld in tabel 2.
| Eigenschap | Omschrijving |
| ControlToCompare | De naam van de server control waarmee vergeleken moet worden. U kunt of ControlToCompare of ValueToCompare gebruiken, niet allebei. |
| Operator | Manier waarop vergeleken wordt. Dit bepaalt wanneer er wel of niet een foutmelding wordt weergegeven. De mogelijke waardes zijn Equal (standaard) voor gelijkheid, NotEqual voor ongelijkheid, GreaterThan voor groter dan, GreaterThanEqual voor groter of gelijk, LessThan voor kleiner dan, LessThanEqual voor kleiner of gelijk, en DataTypeCheck voor het controleren van het gegevenstype van de te valideren control (in dit geval wordt er niet vergeleken met een andere server control of een waarde). |
| Type | Gegevenstype waarmee de vergelijking gedaan moet worden. De mogelijke waardes zijn String (standaard) voor vergelijking van tekst, Integer voor vergelijking van hele getallen, Double voor vergelijking van getalen met decimalen achter de komma, Date voor vergelijking op datum, of Currency voor vergelijking van geld waardes. |
| ValueToCompare | De waarde waarmee vergeleken moet worden. U kunt of ControlToCompare of ValueToCompare gebruiken, niet allebei. |
Waneer u de CompareValidator gebruikt, kunt u de waarde in de te valideren control vergelijken met de waarde in een andere control. Welke control dat is kunt u aangeven in de eigenschap ControlToCompare. Als u met een waarde wilt vergelijken, kunt u deze waarde opgeven in de eigenschap ValueToCompare. Hoe de waardes vergeleken worden, hangt af van de Operator eigenschap en de Type eigenschap. Met Operator eigenschap geeft u aan of er op gelijkheid van waardes gecontroleerd moet worden of juist op een vorm van ongelijkheid. Met de Type eigenschap geeft u aan of de invoer als tekst, getal, datum, of geld vergeleken moet worden. Dit is om te voorkomen dat bijvoorbeeld 2 na 10 komt, hetgeen gebeurt als u op letters vergelijkt in plaats van op cijfers. In het voorbeeld hieronder worden twee wachtwoord velden vergeleken. Als ze ongelijk zijn, krijgt de gebruiker een foutmelding te zien, zoals in figuur 2.
<html>
<head>
</head>
<body>
<form runat=
"server"><table>
<tr>
<td>Wachtwoord</td>
<td>
<asp:TextBox id="Wachtwoord1" runat="server"
TextMode="Password"></asp:TextBox>
<asp:CompareValidator id="WachtwoordCheck" runat="server"
ErrorMessage="Wachtwoorden niet gelijk"
ControlToValidate="Wachtwoord1"
ControlToCompare="Wachtwoord2">
</asp:CompareValidator>
</td>
</tr>
<tr>
<td>Herhaal wachtwoord</td>
<td>
<asp:TextBox id="Wachtwoord2" runat="server"
TextMode="Password"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button id="Opslaan" runat="server" Text="Opslaan">
</asp:Button>
</form>
</body>
</html>
Figuur 2, Weergave van de CompareValidator bij het invoeren van ongelijke
wachtwoorden
De RangeValidator verschilt maar weinig van de RequiredFieldValidator, maar in plaats van dat het controleert of een veld wel ingevuld is, controleert het of de gegeven waarde tussen twee waardes in ligt. Verder functioneert de RangeValidator hetzelfde. Met de eigenschappen in tabel 3 kunt u aangeven tussen welke waardes de gegeven waarde mag liggen, en hoe er vergeleken moet worden.
| Eigenschap | Omschrijving |
| MaximumValue | Grootste waarde die de te valideren control mag hebben. |
| MinimumValue | Kleinste waarde die de te valideren control mag hebben. |
| Type | Gegevenstype waarmee de vergelijking gedaan moet worden. De mogelijke waardes zijn String (standaard) voor vergelijking van tekst, Integer voor vergelijking van hele getallen, Double voor vergelijking van getallen met decimalen achter de komma, Date voor vergelijking op datum, of Currency voor vergelijking van geld waardes. |
In de onderstaande code wordt gebruik gemaakt van een RangeValidator control, om te controleren dat de waarde tussen 18 en 65 ligt. De Type eigenschap geeft aan dat het om een getal gaat, zodat de waardes correct gevalideerd worden. Het resultaat ziet u in figuur 3.
<html>
<head>
</head>
<body>
<form runat="server">
<p>
Leeftijd:
<asp:TextBox id="Leeftijd" runat="server"
Width="37px" MaxLength="2"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Ok"></asp:Button>
<br />
<asp:RangeValidator id="RangeValidator1" runat="server"
ControlToValidate="Leeftijd"
ErrorMessage="Geef een leeftijd tussen 18 en 65."
Type="Integer" MaximumValue="65" MinimumValue="18">
</asp:RangeValidator>
</p>
</form>
</body>
</html>
Figuur 3, RangeValidator die aangeeft dat de waarde niet tussen 18 en 65 ligt.
Ook de RegularExpressionValidator verschilt maar weinig van de RequiredFieldValidator, zo weinig dat de RegularExpressionValidator maar ΘΘn extra eigenschap heeft. Die eigenschap dient een zogenaame regular expression te bevatten waaraan de waarde in de te valideren control aan moet voldoen. Een regular expression is een expressie die een patroon definiδert. Als de waarde dit patroon volgt, dan is de waarde correct, anders niet. De expression die gebruikt wordt om de waarde te valideren kunt u opgeven in de ValidationExpression eigenschap, zoals de code hieronder laat zien:
<asp:RegularExpressionValidator id="CheckTelefoon" Runat="server"
ControlToValidate="Telefoon"
ValidationExpression="(0\d{9})|(0\d{2}( |-)\d{7})|(0\d{3}( |-)\d{6})"
ErrorMessage="Telefoonnummer onjuist">
</asp:RegularExpressionValidator>
Het voorbeeld hierboven controleert of het veld Telefoon een Nederlands telefoonnummer bevat. Het accepteert de volgende mogelijkheden:
Zoals u ziet kunnen regular expressions zeer complex zijn. Visual Studio .NET en Web Matrix bieden daarom een hulpje met een aantal voorgedefiniδerde expressies, zoals u kunt zien in figuur 4. Op www.regxlib.com vindt u bovendien een hele verzameling met expressies die u in uw applicaties kunt gebruiken. Een uitgebreide tutorial over regular expressions kunt u vinden op http://py-howto.sourceforge.net/regex/regex.html.
Het is belangrijk om op te merken dat als de gebruiker geen waarde geeft, dat deze waarde als correct wordt beschouwd. Als een veld dus verplicht is en aan bepaalde voorwaardes moet voldoen, dan moet u dus zowel een RequiredFieldValidator als een RegularExpressionValidator (of een van de andere validatie controls) gebruiken. Dit betekent dat als de Display eigenschap van die controls op Static staat, dat de foutmelding wel eens op een rare plek kan komen te staan, zoals in figuur 4. Dit gebeurt omdat de ruimte voor de validatie controls van te voren wordt gereserveerd, en slechts ΘΘn van de foutmeldingen getoond wordt, want het veld is leeg of de waarde voldoet niet, nooit beide.
Figuur 4, Validatie control op een vreemde plek
Als u wilt dat de foutmelding op dezelfde plek komt te staan, kunt u drie dingen doen. Ten eerste kunt u (mits u uw website maakt voor Internet Explorer 5.0 of hoger) gebruik maken van absolute positioning, en de controls over elkaar plaatsen. Ten tweede kunt u gebruik maken van de ValidationSummary control, waarbij u de Display eigenschap op None zet. Als laatste kunt u de Display eigenschap op Dynamic zetten en de controls achter elkaar plaatsen (zonder spaties of nieuwe regels ertussen), zodat de foutmelding dynamisch in de pagina gezet wordt.
Met de verschillende validatie controls die tot nog toe besproken zijn, kunt u veel, maar in sommige gevallen zit er niets anders op dan zelf code te schrijven die het validatieproces uitvoert voor een bepaalde control. De CustomValidator is bedoeld voor die situaties, en geeft u de mogelijkheid om zowel in de webbrowser zelf als op de server een control te valideren. Het voordeel van de laatste is dat u op allerlei verschillende manieren kunt valideren, bijvoorbeeld aan de hand van gegevens in een database, of via een dienst. U kunt daarbij denken aan een credit card die gecontroleerd moet worden. Over het algemeen wordt daarvoor een verbinding gemaakt met de credit card maatschappij (of een tussenpersoon). Als u de CustomValidator gebruikt, bent u verplicht om op de server validatie code uit te laten voeren. Validatie in de webbrowser daarentegen is facultatief, en is ook alleen bedoeld om het aantal postbacks te verminderen, omdat deze tijd kosten. Gezien de complexiteit van validatie in de webbrowser en de beperkte toegevoegde waarde, wordt dit hier ook niet besproken. Op de server wordt de validatie gedaan door een gebeurtenismethode van de CustomValidator control. Welke code uitgevoerd moet worden kunt u opgeven via OnServerValidate, zoals in de code hieronder.
<html>
<head>
</head>
<body>
<form runat="server">
<asp:TextBox id="Getal" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button">
</asp:Button><br />
<asp:CustomValidator id="GetalOneven" runat="server"
ErrorMessage="Getal moet oneven zijn"
OnServerValidate="CheckOneven" ControlToValidate="Getal">
</asp:CustomValidator>
</form>
</body>
</html>
De bovenstaande code geeft een TextBox control weer die alleen oneven getallen accepteert. De CustomValidator zorgt hiervoor door op de server te controleren of de waarde in de TextBox inderdaad oneven is. De OnServerValidate eigenschap bevat de naam van de gebeurtenisfunctie die op de server wordt uitgevoerd. Hieronder ziet u die functie.
VB.NET
<script Runat="server">
Sub CheckOneven(source As Object, args As ServerValidateEventArgs)
If args.Value mod 2 = 0 Then
args.IsValid = False
Else
args.IsValid = True
End If
End Sub
</script>
C#
<script Runat="server">
void CheckOneven(Object source, ServerValidateEventArgs args)
if((args.Value mod 2) == 0) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
</script>
De code hierboven maakt gebruik van een keuze statement om afhankelijk van de uitkomst van een controle de ene code of de andere code uit te voeren. Als u dit niet helemaal begrijpt, maakt u zich dan geen zorgen, want dit wordt later behandeld in Keuzes maken. Het belangrijkste om op dit moment te weten is dat de gebeurtenismethode via de IsValid eigenschap laat weten of de waarde in de TextBox aan de criteria voldoet of niet. De waarde in de TextBox wordt opgevraagd via de Value eigenschap. Beide eigenschappen maken deel uit van een speciaal object die de gebeurtenismethode kan gebruiken. U vraagt zich misschien af waarom niet gewoon de waarde uit de TextBox wordt opgevraagd via de Text eigenschap van de TextBox zelf. Dat kan niet, omdat de gebeurtenismethode mogelijk meer server controls moet valideren. De gebeurtenismethode moet dus generiek zijn.
Het is soms handiger om de foutmeldingen die gegevens worden niet weer te geven bij de server controls zelf, maar gegroepeerd in een lijstje, of eventueel in een pop-up venster dat alle foutmeldingen weergeeft. Als u de Display eigenschap van de validatie controls op None zet, en u gebruikt de ValidationSummary control, dan kan dit zonder veel moeite. De ValidationSummary geeft een lijst met alle foutmeldingen weer op een centrale plaats en/of in een pop-up venster. Tabel 4 laat zien welke eigenschappen u daarvoor kunt gebruiken, naast de al besproken opmaak eigenschappen.
| Eigenschap | Omschrijving |
| DisplayMode | Bepaalt hoe de lijst met foutmeldingen wordt weergegeven. De mogelijke waardes zijn BulletList (standaard) voor een lijst met de foutmeldingen onder elkaar en met opsommingstekens ervoor, List voor een lijst onder elkaar, en SingleParagraph voor foutmeldingen achter elkaar en voorafgegaan door een cijfer, |
| EnableClientScript | Geeft aan of validatie in de webbrowser gedaan wordt voordat een postback plaatsvindt. Als dit aan staat (standaard) dan zal er geen postback gebeuren voordat de waardes in alle server controls correct zijn. De waarde kan True (standaard) of False zijn. Noot: Validatie op de server gebeurt altijd, om te voorkomen dat iemand de validatie in de webbrowser omzeilt. |
| HeaderText | Tekst voor een kop boven (of voor) de foutmeldingen. Standaard is dit leeg en wordt er dus geen kop weergegeven. |
| ShowMessageBox | Geeft aan of de foutmeldingen in een pop-up venster in de webbrowser getoond moet worden. De waarde kan zijn True of False (standaard). |
| ShowSummary | Geeft aan of de foutmeldingen in de pagina getoond moeten worden. Als u ShowMessageBox gebruikt dan is het wellicht niet nodig om ook in de pagina zelf de foutmeldingen weer te geven. De waarde kan zijn True (standaard) of False. |
De code hieronder laat de ValidationSummary control in actie zien. De code controleert drie TextBox controls waarin naam, email en telefoonnummer in ingevuld worden. Alle velden zijn verplicht, en het email-adres en het telefoonnummer worden gecontroleerd door RegularExpressionValidator controls. Het resultaat van de code nadat er een naam en foutief email adres is ingevuld ziet u in figuur 5.
<html>
<head>
</head>
<body>
<form runat="server">
<table>
<tr>
<td>Naam</td>
<td>
<asp:TextBox id="Naam" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<asp:TextBox id="Email" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Telefoon</td>
<td>
<asp:TextBox id="Telefoon" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button id="Inschrijven" runat="server" Text=
"Inschrijven"></asp:Button>
<p> <asp:ValidationSummary id="Fouten"
runat="server" HeaderText= "Fouten in
het formulier:">
</asp:ValidationSummary>
<asp:RequiredFieldValidator id="NaamVerplicht"
runat="server" ControlToValidate="Naam"
ErrorMessage="U heeft geen naam ingevuld."
Display="None">
</asp:RequiredFieldValidator>
<asp:RequiredFieldValidator id="EmailVerplicht"
runat="server" ControlToValidate="Email"
ErrorMessage="U heeft geen email ingevuld."
Display="None">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="EmailCheck"
runat="server" ControlToValidate="Email"
ErrorMessage="Het email adres is onjuist."
Display="None"
ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
<asp:RequiredFieldValidator id="TelefoonVerplicht"
runat="server" ControlToValidate="Telefoon"
ErrorMessage="U heeft geen telefoonnummer ingevuld."
Display="None">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator id="TelefoonCheck"
runat="server" ControlToValidate="Telefoon"
ErrorMessage="Het telefoonnummer is onjuist."
Display="None"
ValidationExpression="(0\d{9})|(0\d{2}( |-)\d{7})|(0\d{3}( |-)\d{6})">
</asp:RegularExpressionValidator>
</p>
</form>
</body>
</html>
Figuur 5, Voorbeeld van de ValidationSummary control
Als u de foutmeldingen in een pop-up venster wilt tonen, dan dient u de ValidationSummary uit het bovenstaande voorbeeld aan te passen zoals hieronder is weergegeven. Het resultaat ziet u in figuur 6.
<asp:ValidationSummary id="Fouten" runat="server"
HeaderText="Fouten in het formulier:"
ShowSummary="False" ShowMessageBox="True">
</asp:ValidationSummary>
Figuur 6, Voorbeeld van de ValidationSummary control met pop-up venster
⌐2002 Microsoft Nederland BV