Siden er opdateret 8. 3. 2009
Dette script er blevet til med venlig hjælp af Stig JohansenOfte, når man lægger en formular frem på nettet, er man interesseret i, at der ikke kan afsendes fra formularen, før den er fyldestgørende - og korrekt? - udfyldt. Det sparer både brugeren og modtageren en masse ærgrelser og unødig ekstra besvær.
Til formålet kan man med fordel anvende javascript - det foregår direkte i den browser, brugeren sidder ved (her og nu) og serveren bliver ikke kontaktet før formularens input opfylder visse minimumskrav. Samtidig kan brugeren - ved utilstrækkelig eller fejludfyldt formular - sendes tilbage til formularen med fokus sat på netop det felt, hvor data ikke er godkendt og uden at andre data er forsvundet.
Det første skridt til en sådan evaluering er, at man i formularens starttag skal indsætte en instruktion om, at evalueringen skal køres, når der bliver trykket på [Send] i formularen:
<form id="kontakt" method="post" action="sender.php" enctype="multipart/form-data" onsubmit="return validate_form(this)">
I eksemplet herover drejer det sig om teksten onsubmit="return validate_form(this)". Der er tale om en lille stump javascript-kode, der kalder en javascript-funktion. Mere om denne senere.
Det næste skridt er så, at vi skal have indlæst javascriptet med evalueringsfunktionen. Det gøres ved at indsætte denne kodelinje i sidens <head>:
<script type="text/javascript" src="eval.js"></script>
Det tredje - og sidste - skridt er, at lave javascript-filen eval.js, der indeholder evalueringsfunktionen. Inden vi starter med scriptet, skal vi lige definere nogle kriterier:
Her kommer så det javascript - eval.js, der tjekker om de tvungne felter er udfyldt og om emailfeltet ser ud til at være korrekt udfyldt:
function validate_form(thisform)
{
var v1 = document.getElementById('f1');
if (v1.value < '!') {
alert ('Feltet Emne skal udfyldes');
v1.focus();
return false;
}
var v2 = document.getElementById('f2');
if (v2.value < '!') {
alert ('Feltet Navn skal udfyldes');
v2.focus();
return false;
}
var v3 = document.getElementById('f3');
if (v3.value < '!') {
alert ('Feltet Email skal udfyldes');
v3.focus();
return false;
}
var regex = new RegExp('^[\\w-_\.+]*[\\w-_\.]\@([\\w]+\\.)+[\\w]+[\\w]$');
if (!regex.test(thisform.mail.value)){
alert("Email-adressen indeholder ugyldige tegn\r\nEller er på anden måde ikke korrekt udfyldt");
thisform.mail.focus();
return (false);
}
var v4 = document.getElementById('f4');
if (v4.value < '!') {
alert ('Du skal skrive en besked');
v4.focus();
return false;
}
}
Vi starter med at erklære den funktion, vi højere oppe på siden lavede et kald til i formularens starttag.
Derefter følger 5 kodeblokke, hvoraf de 4 (1, 2, 3 og 5) - bortset fra variabelnavne - er ens. Disse 4 blokke tjekker, at der overhovedet er skrevet noget i de 4 krævede felter. Jeg nøjes med at forklare den første, de 3 øvrige burde herefter være til at forstå:
Er der faktisk skrevet i de 3 første felter, kommer vi ned til kodeblok 4, der evaluerer det indtastede i felt 3 - email-feltet - ser det rigtigt ud (formateret som en email-adresse kan se ud)?
Forklaringen på, hvordan denne evaluering virker, kan du læse på 4guysfromrolla.com - forklaringen er på engelsk.
Er der skrevet i alle 4 felter og ser indholdet i felt 3 fornuftigt ud, afsluttes scriptet uden bemærkninger og formularens indhold sendes til videre behandling (cgi, asp eller php på serveren.