Nyeste it-job

Flere it-job

Client-side validering af formularer

af Jonas Astrup, HTML.dk
Sidst opdateret 28. maj 2001

Brugere glemmer nemt at udfylde felter i en formular. Med en validering kan du undersøge om en formular er rigtigt udfyldt - og give brugeren en fejlmeddelelse hvis der mangler noget.

Du kender sikkert allerede til validering af formularfelter. For du har nok selv prøvet at udfylde en formular på et websted - klikke på submit knappen - og ding! Så kommer der en lille såkaldt alertbox frem, og minder dig om, at du har glemt at udfylde et felt.

Og det er netop dette vi vil kigge nærmere på i denne artikel - hvordan man med javascript laver en client-side validering af brugerens indtastninger i en formular.

Hvorfor er det vigtigt at validere?

Ordet valid har betydningen gyldig - det vil sige at en validering undersøger om data er gyldige. Og man ønsker naturligvis altid at de data eller oplysninger brugeren indtaster er gyldige, ellers er de jo ikke noget værd.

En god validering kan være mange penge værd - hvis du f.eks. har en bestillings- eller kontaktformular på dit websted, er det naturligvis både ærgeligt og dyrt hvis en potentiel kunde har udfyldt formularen - men har glemt at udfylde en vigtig del af sin adresse.

Hvordan fungerer det?

Princippet i en client-side validering er, at man indsætter et lille script, oftest javascript, på den HTML side, som indeholder formularen. Når brugeren submitter formularen, aktiveres scriptet, som chekker formularens felter igennem før resultatet sendes til serveren. Valideringen sker altså udelukkende på brugerens PC (klienten) - deraf navnet client-side validering.

Hvordan gør man?

Forestil dig at du har en ganske almindelig formular med to navngivne tekstfelter (navnene fremhævet):

<form action="" method="post">
<p>Dit navn  : <input type="text" name="brugernavn">
<p>Din email : <input type="text" name="epost">
<input type="submit" value="Send">
</form>

Og lad os sige at vi ønsker at brugeren skal udfylde feltet med navnet "brugernavn".

Til dette formål skriver vi et lille javascript, som chekker om feltet "brugernavn" er udfyldt - hvis dette ikke er tilfældet giver vi brugeren en lille advarsel. Scriptet kunne se sådan her ud: (navnet på feltet fremhævet)

<script type="text/javascript">

function validering()
  {
  error = 0;
  if((document.forms[0].brugernavn.value=='') && (error==0))   
  {		
    alert('Du skal udfylde feltet med dit navn!');
    document.forms[0].brugernavn.focus();
    error = 1;		
  }			

  if(error == 0)
  document.forms[0].submit();	
  }

</script>

Scriptet kan kort forklares på denne måde:

Variablen "error" sættes til 0
Indeholdet af feltet "brugernavn" undersøges - hvis det er tomt, sættes variablen "error" til 1, og brugeren får en alertbox med en advarsel.
Til sidst i scriptet undersøges værdien af variablen "error" - kun hvis den er lig 0 submittes formen.

Man kunne sikkert skrive scriptet kortere - men vi har valgt denne opbygning fordi den er smart nå du senere skal koble flere felter på, og dermed validere flere felter samtidig.

Som du sikkert lagde mærke til er scriptet bygget op som en funktion med navnet validering(). Det sidste vi mangler er bare at kalde funktionen når formularen submittes - hvilket gøres på denne måde:

<form action="" method="post" onsubmit="validering();return false;">

Dermed har vi lavet vores første client-side validering på et tekstfelt. Du kan se det samlede eksempel ved at klikke her

Hvordan validerer man flere felter samtidig?

Når du først har forstået at validere ét felt, er det ret simpelt at tilføje flere felter. Vi indsætter simpelthen blot endnu en betingelse med det nye felt i vores javascript funktion.

Nedenfor har vi tilføjet tekstfeltet med navnet "epost" til vores javascript funktion. For at vise hvad der er tilføjet er den del af scriptet, som vedrører de to felter markeret med hver sin farve:

<script type="text/javascript">

function validering()
  {
  error = 0;

  if((document.forms[0].brugernavn.value=='') && (error==0))   
  {		
    alert('Du skal udfylde feltet med dit navn!');
    document.forms[0].brugernavn.focus();
    error = 1;		
  }

  if((document.forms[0].epost.value=='') && (error==0))   
  {		
    alert('Du skal udfylde feltet med din e-mail adresse!');
    document.forms[0].epost.focus();
    error = 1;		
  }	

  if(error == 0)
  document.forms[0].submit();	
  }

</script>

På samme måde kan du tilføje et vilkårligt antal felter til funktionen - det eneste du skal huske er at angive navnet på felterne. Du kan se det samlede eksempel med flere felter ved at klikke her

Hvad med de forskellige typer af felter?

I det eksempel vi har gennemgået her, har vi kun beskæftiget os med tekstfelter. Heldigvis er princippet stort det det samme for selectbokse, checkbokse, textareas, og alle de andre typer af felter der findes.

Under sektionen scripts har vi samlet eksempler på alle de forskellige former for felter. Eksemplerne er lavet på samme form, som er gennemgået i denne artikel - derfor kan du let sammenstykke lige nøjagtig den javascriptfunktion du har behov for.

Her er en liste over de forskellige scripts:

Relateret materiale på HTML.dk

Lær at lave formularer (forms)

Relaterede nyhedsgrupper på Usenet

dk.edb.internet.webdesign.clientside