by
webdesign by
© 1998
Valideren van input
Formulieren zijn wijd verspreid op het Internet. De invoer van zo'n formulier wordt meestal doorgestuurd naar een CGI-server of via smtp naar een bepaald email-adres. Maar hoe kunnen we die invoer nu controleren alvorens hem over het Internet te versturen? Met de hulp van JavaScript kunnen we dit vrij eenvoudig realiseren. Eerst en vooral zullen we aan de hand van een voorbeeld de invoer via een formulier controleren dmv Javascript. Nadien gaan we dieper in op de verschillende manieren voor het versturen van informatie over het Internet.
Laat ons van start gaan met een simpel voorbeeld. Onze HTML-pagina bevat slechts twee tekstelementen. De gebruiker wordt gevraagd zijn Naam en email-adres na te laten. Breng eender wat in en druk vervolgens op de knop Test input. Probeer ook eens helemaal niets in te brengen en zie wat dat geeft.
In het eerste geval verschijnt er een foutboodschap indien we helemaal niets inbrengen. Verder wordt elke input aanvaard. Dit laat natuurlijk toe dat men eender wat inbrengt doch het is beter dan helemaal niets.Hoe ziet het script er nu uit:
<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers
function test1(form) {
if (form.text1.value == "")
alert("Breng a.u.b. een tekst in!")
else {
alert("Hallo, "+form.text1.value+"! Invoer ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Geen geldig e-mail adres!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Naam:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input"
onClick="test1(this.form)">
<P>
E-mail adres:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input"
onClick="test2(this.form)">
</body>
</html>
Laat ons eerst en vooral kijken naar de HTML-code in de body-section. We vinden hier onze twee tekstvelden en twee knoppen terug. De beide knoppen roepen een functie test1() of test2() aan afhankelijk van welke knop we aanklikken. We geven this.form door aan de functies opdat we de juiste elementen later kunnen manipuleren binnen de functie.
De functie test1(form) controleert of de string leeg is. Dit wordt gedaan dmv if (form.text1.value == "")... . 'form' is de variabele
die de waarde van 'this.form' ontvangt in de functieoproep. We kunnen de waarde van een tekstveld aftesten dmv de 'value'-property in combinatie met form.text1. Om te zien of de string leeg is vergelijken we de string met "".
Indien de string gelijk is aan "" dan werd er niets ingevuld in het tekstveld. De gebruiker krijgt dan een footboodschap te zien. Indien de gebruiker toch iets invulde dan krijgt hij 'ok' terug.
Laat ons nu even de test2(form) functie bekijken. In deze functie vergelijken we de ingevoerde string met de lege string "" om zeker te zijn dat er iets werd ingebracht. Maar we hebben iets toegevoegd aan het if-commando. De || stelt de OR-operator voor.
Het if-commando controleert of er voldaan is aan de eerste OF de tweede vergelijking. Als minstens één van de twee waar is dan wordt wat volgt op het if-commando uitgevoerd. Dit betekent dat we een foutboodschap krijgen indien de string leeg is of indien er geen @ voorkomt in de string.
Zoeken naar bepaalde karakters
Soms moeten we de inhoud van een veld beperken tot bepaalde karakters of tot cijfers. Nemen we bijvoorbeeld een telefoonnummer - dit mag enkel en alleen uit cijfers bestaan (we veronderstellen hier dat er geen letters voorkomen in ons telefoonnummer). We zouden dus kunnen controleren op enkel cijfers bij invoer van een telefoonnummer. Toch gebruiken we dikwijls verschillende symbolen om het telefoonnummer leesbaar te maken en makkelijker te onthouden - bijvoorbeeld: 777.34.15, 03/777.34.15 of 00 32 3/777.34.15 (met de nodige spaties tussen landcode en zonenummer). We moeten hier dus bepaalde karakters toelaten in ons script bij het valideren van een telefoonnummer.
Hier volgt de source code:
<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers
function check(input) {
var ok = true;
for (var i = 0; i < input.length; i++) {
var chr = input.charAt(i);
var found = false;
for (var j = 1; j < check.length; j++) {
if (chr == check[j]) found = true;
}
if (!found) ok = false;
}
return ok;
}
function test(input) {
if (!check(input, "1", "2", "3", "4",
"5", "6", "7", "8", "9", "0", "/", ".", " ")) {
alert("Invoer niet ok.");
}
else {
alert("Invoer ok!");
}
}
// -->
</script>
</head>
<body>
<form>
Telefoon:
<input type="text" name="telephone" value="">
<input type="button" value="Check"
onClick="test(this.form.telephone.value)">
</form>
</body>
</html>
In de functie test() specifieren we welke karakters we aanvaarden.
Wat zijn de verschillende mogelijkheden voor het versturen van formulieren? De gemakkelijkste manier is via e-mail. Dit is de methode die we hier nader gaan bekijken.
Als we de data van een formulier willen toevoegen aan een database op de server dan hebben we bijvoorbeeld een CGI (Common Gateway Interface) nodig. Dit laat ons toe de invoer van een formulier automatisch te verwerken en een antwoord te versturen aan de gebruiker. Hiervoor hebben we echter wel toegang nodig tot de server. Dit wordt niet zomaar vrijgegeven door een provider en is enkel ter beschikking voor commerciele klanten of firma's met hun eigen server. Binnen Javascript kunnen we dit niet verwezenlijken.
Het is dus NIET mogelijk een gastenboek te onderhouden dmv Javascript daar Javascript niet kan schrijven naar een file op de server. Dit kunnen we alleen via CGI. Wat wel binnen de mogelijkheden valt is een gastenboek waarbij we antwoorden versturen via e-mail. Dit gebeurt manueel en is dus niet te doen wanneer we 100 of meer mails per dag toegestuurd krijgen.
Het volgende voorbeeld is puur HTML. Hiervoor hebben we dus geen Javascript nodig! We kunnen natuurlijk wel via Javascript de invoer controleren alvorens hem door te sturen via e-mail. We moeten hier wel bij vermelden dat het mailto-commando niet ondersteund wordt door bijvoorbeeld Microsoft Internet Explorer 3.0.
<form method=post action="mailto:debaerej@glo.be" enctype="text/plain"> Wat vindt U van deze site? <input name="choice" type="radio" value="1">Ondermaats.<br> <input name="choice" type="radio" value="2" CHECKED>Tijdverlies.<br> <input name="choice" type="radio" value="3">De moeite waard.<br> <input name="submit" type="submit" value="Versturen"> </form>De property enctype="text/plain" wordt gebruikt om de invoer als pure tekst te ontvangen en niet in gecodeerde vorm. Dit maakt het veel gemakkelijker om de e-mail te lezen.
Indien we de invoer eerst willen valideren alvorens hem over het net te versturen dan kunnen we hiervoor de onSubmit event-handler gebruiken. Deze moeten we verwerken in de <form> tag. Bijvoorbeeld als volgt:
function validate() {
// check if input ok
// ...
if (inputOK) return true
else return false;
}
...
<form ... onSubmit="return validate()">
...
Hierdoor zal ons formulier enkel verstuurd worden over het Internet wanneer aan de controles is voldaan.
Aandacht op een bepaald veld in een formulier
Aan de hand van de focus()-methode kunnen we ons formulier gebruikersvriendelijker maken door de aandacht te vestigen op een bepaald element uit ons formulier. We kunnen ook de aandacht vestigen bij eventuele foute invoer. Dit betekent dat we de cursor plaatsen en de inhoud selecteren opdat de gebruiker de nodige wijzigingen zou aanbrengen. We kunnen dit zeer eenvoudig doen dmv volgende code:
function setfocus() {
document.first.text1.focus();
}
Dit script plaatst de cursor in het veld text1. Indien we dit wensen bij het laden van de pagina dan kunnen we dit doen dmv de onLoad-property in de <body> tag. Bijvoorbeeld:
<body onLoad="setfocus()">We kunnen verder ook de inhoud selecteren:
function setfocus() {
document.first.text1.focus();
document.first.text1.select();
}
Probeer dit eens:We zien dat de cursor in het tekst-veld verschijnt en de inhoud geselecteerd wordt.
| Site monitored
by
webdesign by |