EchoEcho.Com
KOMPLETTE WEBKURSER

HJEM KURSER JAVASCRIPT AVANCERET     
EchoEcho.Com
TOOLS & RESSOURCER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
  
  SØG PÅ DETTE SITE

FORESLÅ DETTE SITE
FORESLÅ DETTE SITE      

FORM VALIDERING

INTRODUKTION


TEKNIKKEN


KODEN


EKSEMPEL

Form Validering :
KODEN

Scriptet der er forklaret på denne side, består af de 4 funktioner listet nedenunder:
  • emailvalidation(this,text)


  • valuevalidation(this,min,max,text,type)


  • digitvalidation(this,min,max,text,type)


  • emptyvalidation(this,text)


Du kan enten validere hvert felt når der er ændringer eller, validere alle felter når når submit knappen bliver klikket.

I den sidste halvdel på denne side kan du lære at bruge en af de metoder sammen med scriptet.

Først, lad os kigge på de forskellige valideringsscripts.




emailvalidation(this,text)
Tjekker om indholdet har det generelle indhold for en email.
Valgfrie parametere er:
text--tekst du vil vise i en alertbox hvis indholdet er illegalt.
function emailvalidation(entered, alertbox)
{
// E-mail Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}
}



valuevalidation(this,min,max,text,type)
Tjekker om indholdet er et tal i et begrænset område.
Valgfrie parametere er:
min --minimum værdi tilladt i feltet.
max --maximum værdi tilladt i feltet.
text --tekst som bliver vist i en alertbox hvis indholdet er illegalt.
type --indtast "I" hvis kun hele tal er tilladt.
function valuevalidation(entered, min, max, alertbox, datatype)
{
// Value Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value)};
}
if ((parseFloat(min)==min && checkvalue<min) || (parseFloat(max)==max && checkvalue>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}



digitvalidation(this,min,max,text,type)
Tjekker om indholdet har et bestemt antal cifre.
Valgfrie parametere er:
min --minimum antal af cifre tilladt i feltet.
max --maximum antal af cifre tilladt i feltet.
text --tekst som bliver vist i en alertbox hvis indholdet er illegalt.
type --indtast "I" hvis kun hele tal er tilladt.

function digitvalidation(entered, min, max, alertbox, datatype)
{
// Digit Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i")
{checkvalue=parseInt(value); if (value.indexOf(".")!=-1) {checkvalue=checkvalue+1}};
}
if ((parseFloat(min)==min && value.length<min) || (parseFloat(max)==max && value.length>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}


emptyvalidation(this,text)
Tjekker om feltet er tomt.
Valgfrie parametere er:
text --tekst som bliver vist i en alertbox hvis indholdet er illegalt.
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

Note:
Alle funktioner kræver this for at blive indtastet som et parameter.
Indtast ordet "this" som et parameter når du kalder en af funktionerne. Dette vil videresende indholdet af et felt til en funktion.


Hvis text ikke er indtastet når du kalder funktionen, vil der ikke komme en popup box hvis en fejl er opsnappet.
Men, funktionen vil stadig retunere værdien "false".
Denne mulighed bruges når vi tjekker for flere mulige fejl på en gang. Det er: når alle felter tjekkes idet submitknappen klikkes.




NÅR DU BRUGER VALIDATION SCRIPTS

Der er to forskellige måder til at kalde disse funktioner.

Den ene bruges når du vil tjekke et felt umiddelbart efter indtastning i det.

Det andet bruges når du vil tjekke alle felter på en gang, idet en bruger klikker submitknappen.




onChange Validation:
For at tvinge browseren til at tjekke hvert felt med det samme, tilføjer vi onChange til hvert af <input> taggene i formen.

Til eksempel: hvis vi ville tjekke om værdien i et bestemt felt har en gyldig e-mail, ville vi tilføje dette:

<input type="text" name="Email" size="20" onChange="emailvalidation(this,'The E-mail is not valid');">





onSubmit Validation
Du foretrækker måske at tjekke alle felter når submitknappen klikkes.
For at gøre dette skal du tilføje onSubmit event handler til <form>tagget.

Hvis til eksempel du har en form som du kalder "minform" og du vil tjekke alle felter når en bruger klikker submitknappen, skal du lave en funktion som tjekker alle felter.

Denne funktion skal så kaldes af en onSubmit-event tilføjet til <form> tagget.

Hvis denne funktion hedder "formvalidation()" ville <form> tagget se sådan ud:

<form onsubmit="return formvalidation(this)">


Funktionen som tjekker hele formen ville så retunere en værdi som er enten false eller true. Hvis den er true ville formen blive sendt - Hvis den er false ville den blive afvist.

Et script som tjekker alle felter i en form ser sådan ud:

function formvalidation(thisform)
Denne funktion tjekker hele formen før den er sendt.
function formvalidation(thisform)
{
with (thisform)
{
if (emailvalidation(Email,"Illegal E-mail")==false) {Email.focus(); return false;};
if (valuevalidation(Value,0,5,"Value MUST be in the range 0-5")==false) {Value.focus(); return false;};
if (digitvalidation(Digits,3,4,"You MUST enter 3 or 4 integer digits","I")==false) {Digits.focus(); return false;};
if (emptyvalidation(Whatever,"The textfield is empty")==false) {Whatever.focus(); return false;};
}
}


Note:
Ovenstående funktion virker som tillæg til de fire funktioner i toppen af denne side.
Ydermere funktionen skal brugertilpasses før du selv kan bruge den.

Du skal indtaste de rigtige formfelters navne som du bruger i din egen form. (Istedet for "E-mail", "Value", "Digits" og "Whatever" i dette eksempel).

Du skal også huske at kalde de rigtige funktioner, afhængigt af hvilket tjek du vil udføre for hvert formfelt.

(I eksemplet er hvert felt tjekket af forskellige funktioner. Du kunne også have hvert felt tjekket af den samme funktion. Hvis til eksempel formen har 4 felter som alle skal indeholde e-mail ville du bruge en emailvalidering til hver. )




<< TILBAGE
LÆS MERE >>

JAVASCRIPT MENU

JAVASCRIPT INTRO


ANIMEREDE KNAPPER


BROWSER DETECTION


COOKIES


POPUP VINDUER


DROP DOWN MENU


FORM VALIDERING


FRAMESET SCRIPT


MULTI LINK








EchoEcho.Com
KOMPLETTE WEBKURSER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
EchoEcho.Com
TOOLS & RESSOURCER

(c) Copyright 1998-1999 NetKontoret - All Rights Reserved