|
|
 |
|
|
|
Scriptet som beskrivs på den här sidan innehåller faktiskt de fyra funktioner som är listade nedanför:
- emailvalidation(this,text)
- valuevalidation(this,min,max,text,type)
- digitvalidation(this,min,max,text,type)
- emptyvalidation(this,text)
Du kan antigen validera varje fält vid tidpunkten det ändras eller så kan du validera alla fält på en gång när skicka knappen har klickats på.
Sista halvan av denna sida kan du lära dig hur du använder båda metoderna tillsammans med scriptet.
Först börjar vi titta på de olika valideringsscripten.
emailvalidation(this,text)
| Kontrollerar om innehållet har den vanliga syntaxen för ett email.
Valfria parametrar är:
text--text som visas i en alertbox om innehållet inte är giltigt.
| function emailvalidation(entered, alertbox)
{
// E-mail Validation av Henrik Petersen / NetKontoret
// Beskrivs på www.echoecho.com/se/jsforms.htm
// Var vänlig och ta inte bort den här raden och de två raderna ovanför.
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)
| Kontrollerar att innehållet är en siffra inom ett visst bgränsat område.
Valfria parametrar är:
min --minsta värdet som är tillåtet i fältet.
max --maximala värdet som är tillåtet i fältet.
text --text som visas i en alertbox om innehållt är ogiltigt.
type --skriver "I" om bara heltal är tillåtna.
| function valuevalidation(entered, min, max, alertbox, datatype)
{
// Value Validation av Henrik Petersen / NetKontoret
// Beskrivs på www.echoecho.com/se/jsforms.htm
// Var vänlig och ta inte bort den här raden och de två raderna ovanför.
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)
| Kontrollerar att innehållet har ett bestämt antal siffror.
Valfria parametrar är:
min --minsta tillåtna antalet siffror i fältet.
max --maximalt tillåtna antalet siffror i fältet.
text --text som visas i en alertbox om innehåller är ogiltigt.
type --skriver "I" om bara heltal är tillåtna.
|
function digitvalidation(entered, min, max, alertbox, datatype)
{
// Digit Validation av Henrik Petersen / NetKontoret
// Beskrivs på www.echoecho.com/se/jsforms.htm
// Var vänlig och ta inte bort den här raden och de två raderna ovanför.
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)
| Kontrollerar om fältet är tomt.
Valfria parametrar är:
text --text som visas i en alertbox om innehållet är ogiltigt.
| function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation av Henrik Petersen / NetKontoret
// Beskrivs på www.echoecho.com/se/jsforms.htm
// Var vänlig och ta inte bort den här raden och de två raderna ovanför.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
|
Notera:
Alla funktioner kräver att this läggs in som en parameter.
Lägg helt enkelt in ordet "this" som en parameter när en av funktionerna anropas. Då skickas innehållet i det fältet som används för tillfället till funktionen.
Om inte text är inlagt när du anropar funktionen, kommer det inte att synas någon popupbox om ett fel har upptäckts.
Hursomhelst, funktionen kommer fortfarande att returnera värdet "false".
Den här möjligheten används för att kontrollera flera möjliga fel på samma gång. Som då alla fält kontrolleras efter det att användaren klickat på skicka-knappen.
ANVÄNDNING AV VALIDATIONSCRIPTS
Det finns två olika sätt att anropa de här funktionerna.
En används när du vill kontrollera fältet genast efter att input gjorts.
Den andra används när du vill kontrollera alla fält på en gång, när användaren klickat på skicka-knappen.
onChange Validation:
För att tvinga webläsaren att kontrollera varje fält genast. Vi lägger in en onChange till vart och ett av <input> taggarna i formuläret.
Tillexempel: om vi önskar att kontrollera om värdet i ett specificerat textfält har en giltig e-postadress lägger vi in det här:
<input type="text" name="Email" size="20" onChange="emailvalidation(this,'E-posten är inte giltig');">
|
onSubmit Validation
Du kanske önskar kontrollera alla fält på en gång när användaren klickat på skicka-knappen.
För att göra det skall du lägga in onSubmit hanterare till <form>taggen.
Om du tillexempel har ett formulär som heter "mittformulär" och du önskar att alla fält kontrolleras när användaren klickar på skicka-knappen måste du skapa en funktion som kontrollerar alla fält.
Den här funktionen skall sedan anropas av en onSubmit-händelse som är inlagd i <form> taggen.
Om den här funktionen kallades "formvalidation()" så skulle <form> taggen se ut så här:
<form onsubmit="return formvalidation(this)">
|
Funktionen som kontrollerar hela formuläret kommer antingen att returnera ett värde som är false eller true. Om det är true så kommer formuläret att skickas - om det är false som kommer det inskrivna att annulleras.
Ett script som kontrollerar alla fält i ett formulär kan se ut så här:
function formvalidation(thisform)
| Den här funktionen kontrollerar hela formuläret innan det skickas.
| function formvalidation(thisform)
{
with (thisform)
{
if (emailvalidation(Email,"Ogiltig e-post")==false) {Email.focus(); return false;};
if (valuevalidation(Value,0,5,"Värdet MÅSTE väljas ut mellan 0-5")==false) {Value.focus(); return false;};
if (digitvalidation(Digits,3,4,"Du MÅSTE skriva 3 eller 4 heltalssiffror","I")==false) {Digits.focus(); return false;};
if (emptyvalidation(Whatever,"Textfältet är tomt")==false) {Whatever.focus(); return false;};
}
}
|
Notera:
Ovanstående funktion fungerar tillsammans med de fyra funktionerna som listades i början av denna sida.
Vidare måste funktionen göras om så att det passar just ditt formulär.
Du kommer att behöva lägga in ändamålsenliga formulärfältsnamn som används i ditt formulär. (Istället för "E-post", "Värde", "Siffror" och "Vadsomhelst" som i används i det här exemplet).
Vidare kommer du att behöva anropa det ändamålsenliga funktionerna beroende på vilken kontroll du önskar utföra på varje fält.
(I exemplet är alla fält kontrollerade av olika funktioner. Du kan naturligtvis kontrollera alla fält med samma funktion. Om tillexempel formuläret har fyra fält som alla skall innehålla en e-postadress får du lägga in en e-postvalidering för varje fält. )
|
|
| |
|
KURSER 
