Evaluering af input før afsendelse

Siden er opdateret 8. 3. 2009

Dette script er blevet til med venlig hjælp af Stig Johansen

Ofte, 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:

formularen indeholder felterne
  • inputfelt for emne, feltet defineret id="f1".
  • inputfelt for navn, feltet defineret id="f2".
  • inputfelt for email, feltet defineret id="f3".
  • textareafelt for mailindhold, feltet defineret id="f4".
det kræves, at disse 4 felter skal udfyldes
hvad der ellers er af inputmuligheder i formularen, lader vi være op til brugeren at beslutte, om disse skal udfyldes eller ej.
særlig evaluering af input for email
er det indtastede formateret korrekt, så det kan tænkes at være en ægte email-adresse (skal adressens validitet prøves af, kræver det en hel del mere). Men
  • indeholder det indtastede et @ og et .?
  • står der noget før @?
  • er der efter @ et . placeret på en plads, der sandsynliggør adskillelse af domænenavn og toplevel-domæne (eks. dk)?
  • indeholder det indtastede nogle tegn, der logisk ikke kan forekomme i en valid email-adresse? Eks:
    • komma, semikolon og kolon - ,, ; og :.
    • alle typer parenteser - <>, (), [] og {}
    • anførselstegn og apostroffer - " og '
    • mellemrum
    • tegnene ½, ¼, §, !, #, £, ¤, $, &, /, \, =, ?, |, * og µ.

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.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2009
Hjemmesideskolen
Du er her: Forsiden - scripts - Evaluering af input før afsendelse
Brugere lige nu: 1
Home Mail