Formulär (JS) - Björns studiewebb

Innehåll

OBS!
Denna sida är (fortfarande) under uppbyggnad!

Denna webbsida beskriver hur man kan använda JavaScript för att validera innehåll i formulär innan formuläret skickas till webbserver. Validering bör alltid ske för att avlasta webbserver från "felaktiga" formulär. JavaScript-validering är dock inte en ersättning till validering på webbserver, endast ett komplement.

Använda JavaScript för att validera innehåll i formulär

Ett mycket bra användningsområde för JavaScript är just att validera innehållet i formulär innan det skickas till webbserver. På så sätt slipper besökare vänta på att formuläret ska skickas till webbserver, webbserver ska validera innehållet i formuläret samt webbserver ska skicka tillbaka ett eventuell negativt svar från sin validering.

Att validera innehållet i ett formulär innebär oftast att innehållet (värden) i ett formulärs olika fält testas på något sätt. Vi måste därför kunna referera till formuläret och dess fält, vilka är objekt i JavaScript.

Referera till formulär- och fältobjekt i ett formulär

Alla fält (kontroller) i ett formulär ingår som en del i JavaScripts objekthierarki, d.v.s. både formulär och fält betraktas som objekt i JavaScript och har en inbördes relation (förälder-barn). Objekten kan ha egenskaper som är både vektorer, med fler objekt i, samt egenskaper med enkla värden (icke objekt) och som innehåller information om objektet (d.v.s. dess tillstånd).

Precis som i övriga delar av JavaScripts objekthierarki så namnges variabler (objekt) med endast ett värde i singular och vektorer med objekt (flera) i plural, d.v.s. med ett s på slutet (t.ex. forms).

Nedan visas den del av objekthierarkin som har med formulär att göra. Den visar på att objektet document är förälder till alla formulär (forms), som i sin tur är förälder till alla kontroller, eller element (elements), i formulär.

document
- forms (eller namnet på formuläret)
  - elements (eller namnet på fältet)

I resterande del av detta avsnitt använder vi ett formulär (med namnet MittFormular) som innehåller ett textfält (med namnet MittFalt) och en Submit-knapp (utan namn). Formuläret skapas med följande HTML-kod.

<form name="MittFormular" id="MittFormular">
  <p>Fyll i lite text: <input type="text"
    name="MittFalt"></p>
  <p><input type="submit" value="Skicka"></p>
</form>

Objektet document har en vektor (forms) med alla formulärobjekt i. Ett formulär (-objekt) kan refereras till antingen genom att indexera i vektorn forms med ett tal eller genom att använda formulärets namn (d.v.s. det värde som angavs i FORM-taggens attribut NAME). Nedan visas exempel på hur en referens (pekare) till första formuläret respektive formuläret med namnet MittFormular tilldelas till variabeln frm.

var frm = document.forms[0];
var frm = document.MittFormular;

Vill vi göra dynamisk kod eller kod som fungerar med flera formulär (t.ex. om vi inkluderar en fil med JavaScript-kod) så är den första formen ovan lämpligast. Men den andra formen ovan är oftast lättare att läsa och förstå.

Observera att JavaScript skiljer på gemener och versaler, d.v.s. vi måste använda samma skiftläge för namnet på formuläret som vi använde i FORM-taggens attribut NAME. Samma sak gäller för fältobjekten nedan.

Själva formulärobjektet är kanske inte så intressant, men dess vektor elements som innehåller alla fält i formuläret är desto intressantare.

Precis som med vektorn forms (i objektet document) kan vi hämta en referens till ett fält genom att använda vektorn elements i ett formulärobjekt. Vi kan även här använda oss av ett index i vektorn eller använda fältets namn. Nedan visas exempel på hur en referens till första fältet respektive fältet med namnet MittFalt (i formuläret med namnet MittFormular) tilldelas till variabeln falt.

var falt = document.MittFormular.elements[0];
var falt = document.MittFormular.MittFalt;

Lättast är oftast att använda den andra formen ovan då det blir enklare att förstå vilket av formulären och vilket fält som avses.

I detta exempel visar vi texten (innehållet) i ett textfält (MittFalt) i en meddelanderuta. För att detta ska ske kan vi använda händelsen OnSubmit för formuläret och lägger därför till den gulmarkerade koden nedan till FORM-taggen (förklaras längre ner):

<form ... onsubmit="return minFunktion()">

I webbsidans HEAD-tagg placeras följande skriptkod:

<script language="text/javascript">
function minFunktion() {
  //Hämta innehållet i textfältet
  var str = document.forms[0].elements[0].value;
  // Visa innehållet i textfältet.
  alert("Textfältet innehåller:\n\n" + str);
  //Returnera falskt så att formuläret inte skickas
  return false;
}
</script>

Exempel 5.1 - Ett enkelt exempel

Händelsen Submit i form-taggen används för att bl.a. köra en JavaScript-funktion som validerar innehållet i ett formulär. Om funktionen returernar sant så skickas formuläret, annars inte. Funktionen bör lämpligen meddela besökaren om varför och vilket fält som denne (eller denna) har fyllt i felaktigt.

För att formuläret inte ska skickas skriver vi det reserverade ordet return för valideringsfunktion i FORM-taggen enligt nedan. Detta gör för att händelse submit ska utföras eller inte beroende på om valideringsfunktion returnerar sant eller falskt. Om valideringsfunktion returnerar falskt så avbryts alltså händelsen submit.

<form ... onsubmit="return minFunktion()">

Glömmer vi (det reserverade ordet) return så kommer webbläsaren skicka formuläret oavsett vad minFunktion() returnerar ovan.

När besökaren klickar på Submit-knappen så kontrollerar en JavaScript-funktion om besökaren fyllt i något i textfältet. Om textfältet är tomt visas en dialogruta och funktonen returnerar falskt.

function validera() {
    //Hämta innehåll i textfältet (en sträng)
  var str = document.MittFormular.MittFalt.value;
  //Kontrollera om längden är 0, d.v.s. fält tomt
  if( str.length == 0 ) {
      //Meddela besökare om felet
    alert("Du måste fylla i något i textfältet!");
    //Returnera false så att formulär inte skickas
    return false;
  }
  // Alla kontroller ar OK
    // Returnera true sa att formulär skickas
  return true;
}

Formulärets kod ser ut enligt följande

<form method="get" action="#" name="TestForm"
  onsubmit="return validera()">
<p>Fyll i ett ortsnamn: <input type="text" 
      name="Ort" size="20"></p>
<p><input type="submit" value="Skicka">
    <input type="reset" value="Återställ"></p>
</form>

Exempel 5.2 - Händelsen submit

Alternativ till händelsen OnSubmit

Det går även att ersätta Submit-knappen med en vanlig knapp (d.v.s. type="button"), koppla en funktion som validerar formuläret till knappen och sen använda formuläretobjektets funktionen submit() i funktionen. Men detta kräver att webbläsaren stödjer version 4 av HTML.

[ ATT GÖRA: Ett exempel....]

Skicka formulär som parameter

Om vi vill använda samma funktion för flera formulär (med flera Submit-knappar på samma webbsida) så kan det vara praktiskt att skicka formuläret som parameter till metoden för OnSubmit. Därmed behöver funktionen endast validera fält i just det formuläret. För att skicka formuläret till funktion så skickar vi "this" som argument till funktionen enligt kod nedan. Eftersom this används i ett formulär så refererar this till just detta formulär.

<form ... onsubmit="return validera(this)">

Vi ändrar signaturen för JavaScript-funktionen genom att lägga till en parameter. Och vi kan sen använda oss av denna parameter för att hämta en referens till fältet. Vi skriver om ovanstående funktion validera och ändrar följande rader:

function validera(formular) {
    //Hämta innehåll i textfältet (en sträng)
  var str = formular.MittFalt.value;
  ...
}

Olika fält har olika egenskaper och metoder, även om många är gemensamma för flera. Nedan visas listor med egenskaper och metoder för respektive typ av fält. Egenskaper är publika variabler i fältobjekten (skrivs utan parenteser) och metoder följs av parenteser.

value - innehållet i textfält (som sträng)
focus() - placerar markören i textfältet. Användbart i valideringsfunktioner då markör kan placeras i ett fält med felaktig data.
select() - markerar innehållet i textfältet. Användbart i samband med focus() så att besökare enkelt kan ersätta markerad text med en annan.

Vi använder egenskapen value för att läsa innehållet i ett textfält. Värdet i ett textfält är en sträng (ett strängobjekt), d.v.s. vi kan fråga strängen om dess längd (med egenskapen length) eller loopa över strängen (för att t.ex. kontrollera varje tecken ett åt gången). Ett typiskt exempel är följande (som kontrollerar om ett textfält är tomt):

function validera(f) {
  if( f.MittFalt.value.length == 0 )
    alert('Du måste fylla i textfältet!');
}

Ett användningsområde för metoden focus() är då en webbsida med formulär laddas. Vi kan då använda händelsen OnLoad i BODY-taggen för att anropa focus() i t.ex. första textfältet. Därmed kan besökaren börja fylla i information i formuläret utan att först behöva klicka i textkontrollen.

<body onload="document.forms[0].EttFalt.focus()">

(Alternativ kan vi placera anropet av focus() i en JavaScript-funktion som vi placerar i attributet ONLOAD.)

Ett annat användningsområde för focus() är att placera markören (fokus) i ett fält som innehåller felaktig data vid validering av ett formulär. Därmed kan besökaren se vilket fält som innehåller felaktig data och börja ändra utan att klicka i fältet först.

Exempel 5.3 - Egenskaper för textfält

selectedIndex - returnerar ett tal motsvarande det markerade alternativet i listrutan (med början på 0). Om inget alternativ är markerat så returneras -1.&
options - returnerar en vektor med alla alternativ i listrutan (se mer nedan).
focus() - placerar "markören" i listrutan (gör det möjligt att markera med pil- och mellanslagstangenter).

Mest användbart är egenskapen selectedIndex som kan kontrolleras att den är större eller lika med 0, d.v.s. att minst ett alternativ i listruta har valts.

text - returnerar texten för markerat alternativ i listrutan.
value - returnerar värdet i OPTION-taggens attribut VALUE

Detta exempel kontrollerar om besökare markerat något alternativ i en listruta (med namnet MinLista). Om så är fallet så tilldelas variabeln valtIndex index för alternativet, variabeln valtAlt texten för markerat alternativ och valtVarde värdet i VALUE-attributet.

function visaInnehall() {
  var falt, valtIndex, valtText, valtVarde;
  //Hämta referens till fält
  falt = document.forms[0].MinLista;
  //Hämta index för markerat alternativ
  valtIndex = falt.selectedIndex;
  //Om något alternativ markerat - index > -1
  if( valtIndex >= 0 )
  {
    //Hämta text + värde fr attributet VALUE
    valtText = falt.options[valtIndex].text;
    valtVarde = falt.options[valtIndex].value;

      //Visa meddelanderuta med variablerna
    alert("Text för markerat alternativ är: " 
      + valtText + "\n\n"
      + "Värde för markerat alternativ är: " 
      + valtVarde);
  }
  else
    alert('Du har inte markerat något alternativ!');
}

I formuläret kan vi använda en "vanlig" knapp för att anropa funktionen visaInnehåll() och HTML-koden blir då följande:

<form name="MittFormular">
  <p>Markera ett alternativ i listan och klicka på 
    knappen.</p>
  <p>
  <select name="MinLista" size="8">
    <option value="1">Ett</option>
    <option value="2">Två</option>
    <option value="3">Tre</option>
    <option value="4">Fyra</option>
    <option value="5">Fem</option>
  </select>

  <input type="button" value="Kör funktion" 
    onclick="visaInnehall()">
  </p>
</form>

Formulär (JavaScript)

Innehåll

Använda JavaScript för att validera innehåll i formulär

Referera till formulär- och fältobjekt i ett formulär

Exempelformulär

Formulärobjekt

Fältobjekt

Ett enkelt exempel

Händelsen Submit

Ett enkelt exempel

Alternativ till händelsen OnSubmit

Skicka formulär som parameter

Egenskap för fält

Textfält

Listrutor

Vektorn options

Exempel

Radioknappar

Kryssrutor

Referenser