Programmeren in ASP.NET/Validering
Wat is validering?
[bewerken]Validering is het onderwerpen van data aan een gegeven verzameling regels. In ASP.NET is het dikwijls de invoer van bezoekers die we willen valideren in een web formulier. Er zijn een aantal redenen waarom we dit zouden willen doen. Enkele simpele voorbeelden:
- Er werden geen of onvolledige gegevens ingevoerd
- De waarde van de ingevoerde gegevens is niet binnen de juiste grenzen
- Het formaat van de ingevoerde gegevens is niet correct
ASP.NET-valideringcontrols
[bewerken]In ASP.NET is validering gemakkelijk toe te voegen door middel van een verzameling controls die valideringcontrols genoemd worden.
Er zijn 5 types individuele valideringcontrols. Dit zijn ze:
- RequiredFieldValidator
- CompareValidator
- RangeValidator
- RegularExpressionValidator
- CustomValidator
De Required Field Validator zorgt ervoor dat de gebruiker iets moet invullen. Het mag eender wat zijn, maar de gebruiker kan het veld niet leeg laten.
De Compare Validator en de Range Validator vergelijken beide de invoer (in de aard van x>y). Het verschil tussen beide is dat de Compare Validator maar één kant controleert, terwijl de Range Validator zowel een ondergrens als een bovengrens kan opleggen.
De RegularExpression Validator controleert de invoer met een reguliere expressie. Enkele veelgebruikte expressies, zoals voor een e-mail-adres, zijn direct beschikbaar.
Als geen enkele validator voor jou past, dan kan je je eigen criteria schrijven en het in een Custom Validator inkapselen.
Naast deze individuele valideringcontrols, is er nog een laatste soort: de Validation Summary Control. Deze control laat je toe om gemakkelijk te controleren of elke validator op een pagina voldaan is of niet, in de plaats van ze elk afzonderlijk te checken.
Een interessante eigenschap van valideringcontrols is dat ze automatisch client-side-validering uitvoeren via JavaScript in recente browsers. De validering gebeurt hoe dan ook nogmaals op de server, maar je krijgt automatisch het voordeel van onmiddellijke feedback als de gebruiker een recente browser gebruikt. Je hoeft zelfs geen client-side-code te schrijven.
Belangrijk: omdat er geen client-side-validering gebeurt om andere browsers dan Internet Explorer, en omdat zelfs Internet Explorer-gebruikers toch JavaScript kunnen uitschakelen, moet je op de server nog altijd controleren of de validering gelukt is, vooraleer je andere code uitvoert. Dit moet je doen met
If(Page.IsValid) Then
' code die pas uitgevoerd wordt als de validering gelukt is
End If
Nota: (ASP.NET 1.x) De client-side code voor validering staat in een bestand "WebUIValidation.js. Om validering te laten werken, moet dit bestand in een subfolder "aspnet_client\system_web\xxxxxxx" in de root van de website staan (xxxxxxxx is de versie van het .NET framework). In ASP.NET 2.0 is dit niet meer nodig, daar wordt een javascriptbestand automatisch op de server gegenereerd.
Voorbeelden
[bewerken]Hier is een simpel voorbeeld dat een RequiredFieldValidator gebruikt om ervoor te zorgen dat de gebruiker een naam invult:
required.aspx
<%@ Page Language="VB" %>
<script runat="server">
Sub btnSubmit_Click(Sender as Object, E as EventArgs)
If(Page.IsValid) Then
' Doe iets
End If
End Sub
</script>
<html>
<head>
<title>ASP.NET Form Validering voorbeeld - Required Field Validator</title>
</head>
<body>
Merk op dat dit formulier niets doet behalve de Required Field Validator illustreren.
<hr>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Voer je naam in:
<asp:TextBox id="tbName" runat="server" />
<asp:RequiredFieldValidator id="valTxtName" ControlToValidate="tbName"
ErrorMessage="Voer je naam in!" runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit"
onClick="btnSubmit_Click" runat="server" />
</form>
<hr>
Hint: Probeer het formulier in te dienen zonder iets in te tikken.
</body>
</html>
Je kan ook op voorhand al een waarde invullen, en eisen dat de gebruiker deze waarde verandert. Dit doe je met de eigenschap "InitialValue" van de RequiredFieldValidator.
Hier is een ander voorbeeld, deze keer met een RangeValidator:
range.aspx
<%@ Page Language="VB" %>
<script runat="server">
Sub btnSubmit_Click(Sender as Object, E as EventArgs)
' Doe iets
End Sub
</script>
<html>
<head>
<title>ASP.NET Form Validering voorbeeld - Range Validator</title>
</head>
<body>
<form id="frmValidator" action="range.aspx" method="post" runat="server">
Voer je leeftijd in:
<asp:TextBox id="tbAge" runat="server" />
<asp:RequiredFieldValidator id="valTxtAgeReq" ControlToValidate="tbAge"
ErrorMessage="Vul je leeftijd in!" Display="Dynamic"
runat="server" />
<asp:RangeValidator id="valTxtAgeRange" ControlToValidate="tbAge"
Type="Integer" MinimumValue="21" MaximumValue="100"
ErrorMessage="Je moet ouder zijn dan 21 en jonger dan 100!"
Display="Dynamic" runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit"
onClick="btnSubmit_Click" runat="server" />
</form>
<hr>
Hint: Probeer een leeftijd onder 21 in te vullen.
</body>
</html>
Opmerkingen
- Vergeet bij de RangeValidator of CompareValidator niet de property "Type" in te stellen. Standaard staat dit op "String", maar voor getallen geeft dit foutieve resultaten (de string "2" is groter dan de string "10"!).
- Naast tekstvakken kan je nog de volgende controls valideren: ListBox, DropDownList, RadioButtonList, HtmlInputText, HtmlInputFile, HtmlSelect en HtmlTextArea.
- Je mag meerdere validators op één enkele control zetten. Dit is soms nodig, want de CompareValidator en de RangeValidator controleren niet of de waarde niet leeg is. Als je een bepaalde waarde wil controleren, én de waarde mag ook niet leeg zijn, dan moet je 2 validators gebruiken.
Oefeningen
[bewerken]- Schrijf een pagina waar je je adres en telefoonnummer moet ingeven. Doe de gepaste validering
- Schrijf een pagina waar je 3 multiple-choice vragen moet beantwoorden. Controleer of de 3 vragen werkelijk beantwoord werden (goed of fout heeft geen belang).
- Schrijf een validator voor een wachtwoordvak. Het wachtwoord moet altijd minstens 1 letter en 1 cijfer bevatten.
- Schrijf een formulier met twee wachtwoordvakken. De beide waarden moeten identiek zijn.
- Schrijf een formulier waar je een datum moet ingeven. Het moet een datum zijn die al voorbij is. Tip: omdat de ValueToCompare variabel is, moet je de waarde ervan instellen in Page_Load.
CustomValidator
[bewerken]Als er geen validator is die exact doet wat je wil, dan kan je je eigen valideringsfunctie schrijven. Gebruik de CustomValidator-control, en gebruik het event OnServerValidate.
De handler voor dit event ziet er zo uit:
Sub ServerValidation(source As Object, args As ServerValidateEventArgs)
' Schrijf hier je eigen code om te testen of het formulier geldig is.
If(formuliergeldig) Then
args.IsValid = True
Else
args.IsValid = false
End If
End Sub
Zoals je merkt moet je de waarde van args.IsValid instellen naargelang het formulier goed of slecht ingevuld is.
Indien je wil kan je zelfs client-side-validering toevoegen met behulp van de ClientValidationFunction-property. Voeg dan een javascriptblok toe aan de pagina met de betreffende functie erin. Deze functie moet true of false geven naargelang de validering gelukt is of niet.
Bij een CustomValidator is het niet verplicht de ControlToValidate-property in te stellen.
Oefeningen
[bewerken]- Maak een formulier waar de gebruiker een even getal moet invullen. Gebruik validering.
- Schrijf een pagina waar je moet ingeven welke talen je spreekt. Zorg ervoor dat minimaal één taal gekozen moet worden.
- Schrijf een pagina waar je een geschenk mag kiezen. Uit 4 mogelijkheden moet je er exact 2 aankruisen. Controleer of de keuze hieraan voldoet.
Overzicht valideringcontrols
[bewerken]| Control | Beschrijving | HTML voorbeeldcode |
|---|---|---|
| RequiredFieldValidator | Laat je toe om te vermijden dat het veld blanco gelaten werd. | <asp:RequiredFieldValidator id="RequiredFieldValidator1" ControlToValidate="ControlID1" ErrorMessage="Vul iets in!" runat="server"></asp:RequiredFieldValidator> |
| CompareValidator | Laat je toe om de inhoud van de ene control te vergelijken met die van een andere control, of met een bepaalde waarde. | <asp:CompareValidator id=CompareValidator1 ControlToValidate="ControlID1" ControlToCompare="ControlID2" (of ValueToCompare="50") Type="Integer" Operator="GreaterThan" ErrorMessage="De waarde moet ... zijn." runat="server"></asp:CompareValidator> |
| RangeValidator | Laat je toe om te controleren of de invoer in een control binnen een bepaald bereik ligt. | <asp:RangeValidator id=RangeValidator1ControlToValidate="ControlID1" MaximumValue="12/31/1998" MinimumValue="1/1/1998" Type="Date" ErrorMessage="De waarde moet tussen..." runat="server" ></asp:RangeValidator> |
| RegularExpressionValidator | Laat je toe om te controleren of een veld voldoet aan een bepaald "invoermasker" (met een reguliere expressie). | <asp:RegularExpressionValidatorid=RegularExpressionValidator1 ControlToValidate="ControlID1" ValidationExpression=".*@.*\..*" ErrorMessage="Verkeerde waarde" runat="server" ></asp:RegularExpressionValidator> |
| CustomValidator | Laat je toe een functie toe te wijzen, zowel server-side als client-side, voor het valideren van een bepaalde control. | <asp:CustomValidator id="CustomValidator1" ClientValidationFunction="ClientValidate" OnServerValidate="ServerValidate" ErrorMessage="Verkeerde waarde" runat="server" ></asp:CustomValidator> |
Validation Summary
[bewerken]Hier is een script dat het gebruik van de Validation Summary-control illustreert:
summary.aspx
<%@ Page Language="VB" %>
<script runat="server">
Sub btnSubmit_Click(Sender as Object, E as EventArgs)
' Controleert of alle controls op de pagina geldig zijn!
If (Page.IsValid) Then
' Doe Iets
End If
End Sub
</script>
<html>
<head>
<title>ASP.NET Validering voorbeeld - Summary</title>
</head>
<body>
<p>Noteer dat dit formulier uiteindelijk niets anders doet
dan de Validators illustreren.</p>
<form runat="server">
Vul je naam in:
<asp:TextBox id="tbName" runat="server" />
<asp:RequiredFieldValidator id="valTxtName" ControlToValidate="tbName"
ErrorMessage="Vul je naam in!"
runat="server">
***
</asp:RequiredFieldValidator>
<br />
Voer je leeftijd in:
<asp:TextBox id="tbAge" runat="server" />
<asp:RequiredFieldValidator id="valTxtAgeReq"
ControlToValidate="tbAge"
ErrorMessage="Voer je leeftijd in!"
Display="None"
runat="server">
***
</asp:RequiredFieldValidator>
<asp:RangeValidator id="valTxtAgeRange" ControlToValidate="tbAge"
Type="Integer" MinimumValue="21" MaximumValue="100"
ErrorMessage="Je moet ouder zijn dan 21 en jonger dan 100!<br />"
Display="None" runat="server">
***
</asp:RangeValidator>
<br />
<asp:button id="btnSubmit" text="Submit"
onClick="btnSubmit_Click" runat="server" />
<asp:ValidationSummary ID="valSummary"
HeaderText="Er was een fout bij het invoeren van je formulier.
Controleer het volgende:"
DisplayMode="BulletList"
runat="server" />
</form>
</body>
</html>
Merk op dat beide validators een Display-attribuut "None" hebben. Deze optie werkt samen met de summary-validator, zodanig dat de fout alleen in de summary getoond wordt, en niet nog eens in de aparte validators.
Display heeft drie mogelijke instellingen:
- None: de fout wordt niet getoond (als er een summary-validator is waar de fout wel getoond wordt)
- Static: de fout wordt getoond en de ruimte voor de foutboodschap wordt altijd ingenomen, ook als er geen fout optreedt
- Dynamic: de fout wordt getoond en de ruimte voor de foutboodschap wordt alleen ingenomen als er een fout is. Anders wordt deze ruimte "samengeklapt"
Validering uitschakelen voor sommige knoppen
[bewerken]Soms gebruik je een knop "Annuleren" of "Cancel" op je pagina. Als je op deze knop drukt wordt er normaal gezien ook validering toegepast. Maar dat betekent dat je het formulier eerst correct moet invullen voor je op "Annuleren" kan drukken!
Om dit probleem op te lossen heeft elke knop ook een eigenschap "CausesValidation", die standaard op "True" ingesteld staat. Als je deze op "False" zet voor de "Cancel"-knop, dan wordt er voor die knop geen validering uitgevoerd.
Validatiegroepen (ASP.NET 2.0)
[bewerken]In ASP.NET 1.x is er een probleem als je meerdere formulieren op één pagina wil gebruiken. Dit komt meer voor dan je denkt, bijvoorbeeld als je een kalender-control hebt en op dezelfde pagina een vakje om in te loggen. In een dergelijk geval zullen validator-controls het tweede formulier blokkeren zolang het eerste niet goed ingevuld is, en omgekeerd.
In ASP.NET 2.0 is dit probleem opgelost door de invoering van validatiegroepen.
Het enige wat je moet doen is de eigenschap ValidationGroup instellen voor de verschillende validatiecontrols, en voor de overeenkomstige submit-knoppen. Controls die bij mekaar horen moet je dezelfde waarde geven. In het voorbeeld hieronder zijn er twee validatiegroepen: Groep1 en Groep2.
validatiegroepen.aspx
<%@ Page Language="vb" %>
<script runat="server">
Sub Groep1Click(ByVal s As Object, ByVal e As EventArgs)
If Page.IsValid Then
lblResult.Text = "Groep 1 verwerkt"
End If
End Sub
Sub Groep2Click(ByVal s As Object, ByVal e As EventArgs)
If Page.IsValid Then
lblResult.Text = "Groep 2 verwerkt"
End If
End Sub
</script>
<html>
<head runat="server">
<title>Validatiegroepen</title>
</head>
<body>
<form runat="server">
<asp:Label ID="lblResult" Runat="Server" />
<fieldset style="padding:20px">
<legend>Groep 1</legend>
<asp:TextBox id="TextBox1" Runat="Server" />
<asp:Button ValidationGroup="Groep1" Text="Submit" ID="btn1"
OnClick="Groep1Click" Runat="Server" />
<asp:RequiredFieldValidator ValidationGroup="Groep1" ID="rqv1"
ControlToValidate="TextBox1" Text="(verplicht)" Runat="Server" />
</fieldset>
<fieldset style="padding:20px">
<legend>Groep 2</legend>
<asp:TextBox id="TextBox2" Runat="Server" />
<asp:Button ValidationGroup="Groep2" Text="Submit" ID="btn2"
OnClick="Groep2Click" Runat="Server" />
<asp:RequiredFieldValidator ValidationGroup="Groep2" ID="rqv2"
ControlToValidate="TextBox2" Text="(verplicht)" Runat="Server" />
</fieldset>
</form>
</body>
</html>
Als je nu Groep1 niet invult, kan je toch Groep2 nog versturen, en omgekeerd.