En JavaScript lösning för typkontroll

Ett sätt att lösa problemet med felaktigt data vid insättingar och uppdateringar är att aldrig någonsin sända iväg datat om det inte är korrekt.

Nedanstående form kräver att man matar in något i alla fält. Värdena måste dessutom vara giltiga för den datatyp som krävs.

Heltal (n)
Decimaltal (n,n)
Datum (dd.mm.yy)
Tid (hh:mm)
TEXT (max 20)

Formens kod ser ut på följande sätt:

<form name="TESTAR" ACTION="doSomething.asp" onsubmit="return testTheFields()">
<table>
<tr>
   <td>Heltal (n)</td>
   <td><INPUT TYPE="TEXT" NAME="INTEGER" SIZE="30"></td>
</tr>
<tr>
   <td>Decimaltal (n,n)</td>
   <td><INPUT TYPE="TEXT" NAME="DOUBLE" SIZE="30"></td>
</tr>
<tr>
   <td>Datum (dd.mm.yy)</td>
   <td><INPUT TYPE="TEXT" NAME="DATE" SIZE="30"></td>
</tr>
<tr>
   <td>Tid (hh:mm)</td>
   <td><INPUT TYPE="TEXT" NAME="TIME" SIZE="30"></td>
</tr>
<tr>
   <td>TEXT (max 20)</td>
   <!-- MAXLENGTH sätter maxlängd för texten -->
   <td><INPUT TYPE="TEXT" NAME="TEXT" SIZE="30" MAXLENGTH="20"></td>
</tr>
<tr>
   <td><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="TESTA"></td>
   <td><INPUT TYPE="RESET" VALUE="TÖM"></td>
</tr>
</table>
</form>

Det som är viktigt är att formen har ett namn samt att man fångar upp onsubmit händelsen med onsubmit="return testTheFields().

Detta gör att när submit knappen trycks kommer funktionen testTheFields() att köras och om den returnerar false kommer inte "submiten" att utföras och datat sänds inte vidare. Först när testTheFields() returnerar true kommer sidan doSomething.asp att åberopas

Funktionen testTheFields() ser i sin enklaste form ut på följande sätt.
(Den kontrollerar bara om det är någonting skrivet i fältet för Heltal)

<SCRIPT LANGUAGE="JavaScript">
<!--
// funktion för att validera formdatat
function testTheFields()
{
   // TESTAR är namnet på formen
   // INTEGER är namnet på textboxen för heltalet
   // Observera att jämförelser sker med == (två likamed)
   // och att if är en funktion, därav parenteserna
   if (document.TESTAR.INTEGER.value.length == 0)
   {
      // alert visar en messagebox
      alert("Heltalet är tomt");
      // returnera fase för att förhindra submit
      return false;
   }
   // kommer vi hit är allt ok eftersom
   // return false ovan gick bort från funktionen
   // om det var tomt i fältet
   return true;
}
// -->
</SCRIPT>

För att kontrollera alla textboxar gör man således följande

<SCRIPT LANGUAGE="JavaScript">
<!--
function testTheFields()
{
   if (document.TESTAR.INTEGER.value.length == 0)
   {
      alert("Heltalet är tomt");
      return false;
   }
   if (document.TESTAR.DOUBLE.value.length == 0)
   {
      alert("Decimaltalet är tomt");
      return false;
   }
   if (document.TESTAR.DATE.value.length == 0)
   {
      alert("Datumet är tomt");
      return false;
   }
   if (document.TESTAR.TIME.value.length == 0)
   {
      alert("Tiden är tom");
      return false;
   }
   if (document.TESTAR.TEXT.value.length == 0)
   {
      alert("Texten är tom");
      return false;
   }
   return true;
}
// -->
</SCRIPT>

Detta räcker dock inte. Vi måste även kontrollera om det är GILTIGT data i textboxarna

Om ni arbetat lite mer med VB eller Access kanske ni känner till att det finns diverse Is... funktioner t.ex. IsDate och IsNumeric. Dessa finns inte i JavaScript! (De kanske finns i de nyaste versionerna, jag har inte kollat, men det hjälper inte eftersom de flesta använder gamla browsers.)

Vi behöver då skriva egna kontrollfunktioner t.ex. MyIsInteger

Nedan kommer några användbara kontrollfunktioner och hur de kan användas.

<!-- Dessa skulle jag personligen sätta i en skild
Och inkludera för att slippa se skiten -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function MyIsInteger(value)
{
   var localVal;
   localVal = parseInt(value);
   if (isNaN(localVal))
   {
      return false;
   }
   else
   {
      if (localVal.toString() != value)
         return false;
      else
         return true;
   }
}

function MyIsDouble(value)
{
   var localVal;
   localVal = value;
   arrayOfStrings = value.split(",")
   if (arrayOfStrings.length > 2 )
      return false;

   if (arrayOfStrings.length == 2 )
      localVal = arrayOfStrings[0] + "." + arrayOfStrings[1];

   localVal = parseFloat(localVal);
   if (isNaN(localVal))
   {
      return false;
   }
   else
   {
      if (localVal.toString() != localVal)
         return false;
      else
         return true;
   }
}
function MyIsTime(value)
{
   avals = value.split(":");
   if (avals.length == 1 )
      return false;
   if (parseInt(avals[0]) > 24)
      return false;
   if (parseInt(avals[1]) > 60)
      return false;
   return true;
}

function MyIsDate(value)
{
   var localVal;
   localYear = new Date();
   localDate = new Date();

   avals = value.split(".");
   if (avals.length == 1 )
      return false;
   if (avals.length == 2 )   
   {
      localDate.setYear(localYear.getYear());
      localDate.setMonth(parseInt(avals[1])-1);
      localDate.setDate(parseInt(avals[0]));
   }
   else
   {
      if (avals.length == 3 )   
      {
         localDate.setYear(parseInt(avals[2]));
         localDate.setMonth(parseInt(avals[1])-1);
         localDate.setDate(parseInt(avals[0]));
      }
      else
      {
         return false;
      }
   }
   if (isNaN(localDate))
   {
      return false;
   }
   else
   {
      if (avals.length == 2)
      {
         if (localDate.getMonth()+1 != parseInt(avals[1]))
         {
            return false;
         }
         if (localDate.getDate() != parseInt(avals[0]))
         {
            return false;
         }
      }
      else
      {
         if (localDate.getMonth()+1 != parseInt(avals[1]))
         {
            return false;
         }
         if (localDate.getDate() != parseInt(avals[0]))
         {
            return false;
         }
         if (localDate.getYear() != parseInt(avals[2]))
         {
            if (parseInt("19" + localDate.getYear()) != parseInt(avals[2]))
               return false;
         }
      }
   }
   return true;
}
// -->
</SCRIPT>
<!-- Kontroll funktionerna tog slut-->

<SCRIPT LANGUAGE="JavaScript">
function testTheFields()
{
   if (document.TESTAR.INTEGER.value.length == 0)
   {
      alert("Heltalet är tomt");
      return false;
   }
   // ! betyder Not (inte)
   if (!MyIsInteger(document.TESTAR.INTEGER.value))
   {
      alert(document.TESTAR.INTEGER.value + "\nÄr inte ett heltal");
      return false;
   }
   if (document.TESTAR.DOUBLE.value.length == 0)
   {
      alert("Decimaltalet är tomt");
      return false;
   }
   if (!MyIsDouble(document.TESTAR.DOUBLE.value))
   {
      alert(document.TESTAR.DOUBLE.value + "\nÄr inte en siffra");
      return false;
   }
   if (document.TESTAR.DATE.value.length == 0)
   {       alert("Datumet är tomt");
      return false;
   }
   if (!MyIsDate(document.TESTAR.DATE.value))
   {
      alert(document.TESTAR.DATE.value + "\nÄr inte ett datum");
      return false;
   }
   if (document.TESTAR.TIME.value.length == 0)
   {
      alert("Tiden är tom");
      return false;
   }
   if (!MyIsTime(document.TESTAR.TIME.value))
   {
      alert(document.TESTAR.TIME.value + "\nÄr inte en tid")
      return false;
   }
   if (document.TESTAR.TEXT.value.length == 0)
   {
      alert("Texten är tom");
      return false;
   }
   return true;
}
// --> </SCRIPT>