• Forside
• Idékassen
• Artikler/erfaringer
• Links
• Om softspot

• ASP 3.0
• HTML og CSS
• JavaScript
  • Klient validering
  • AJAX
• ASP.NET
• Umbraco

Deklarativ validering af formularer

I forbindelse med en besvarelse af et spørgsmål på eksperten.dk kom jeg i tanke om denne metode til at lave standardvalidering af en formular på klienten. Det er muligvis ikke nyt, men det er i det mindste ikke så ofte jeg har set denne metode anvendt.

Konceptet går ud på, at der laves en generisk funktion som, i samspil med et objekt indeholdende definitioner af feltnavne, fejltekster og valideringsfunktioner kan validere en formular. Formatet på objektet er nogenlunde således:

var valideringer = {  standardvalidering: function(fld,obj) {    return obj.value != "";  },  regler:[    { felt:"strNavn", tekst:"Angiv venligst navn" },    { felt:"strAdresse", tekst:"Angiv venligst adresse" },    { felt:"strPostnr", tekst:"Angiv venligst postnr" },    { felt:"strBy", tekst:"Angiv venligst by" },    { felt:"strLand", tekst:"Angiv venligst land" },    { felt:"strTelefon", tekst:"Angiv venligst telefonnr." },    { felt:"strEmail", tekst:"Angiv venligst e-mail" },    {      felt:"strEmail",      tekst:"Der skal angives en gyldig e-mail",      validering:function(fld,obj){        return !obj.value.match(/^[\w\.\-_]+@[\w\-_]+\.[\w\.\-_]+$/gi);      }    }  ]};

Valideringsobjektet deklareres ud fra flg. regler:

Der findes 2 felter i selve validerings-objektet, nemlig standardvalidering og regler.

Standardvalidering, som er valgfrit, er en reference til en funktion som benyttes til at validere et felt, der ikke selv definerer nogen valideringsfunktion (det kommer jeg til om lidt). Det er altså en dovenhedsparameter ;-)

Regler, som er et array af feltvalideringsobjekter. Et feltvalideringsobjekt definerer hvilke felter der skal valideres og hvordan.

Hvert feltvalideringsobjekt defineres med et antal egenskaber og evt. en reference til en valideringsfunktion. To felter er påkrævet, nemlig felt og tekst. Felt er navnet på det felt i formularen som skal valideres (det er altså det der står i name-atributten på INPUT-, TEXTAREA- eller SELECT-elementet) og tekst er den fejltekst der skal vises i tilfælde af at valideringen fejler.

Der kan specificeres yderligere egenskaber som understøtter den valgte valideringsfunktion, men dette afhænger af hvilken valideringsfunktion der hæftes på et felt og kan derfor variere fra validering til validering. De eksempler jeg har angivet her i dokumentet kræver dels en egenskab som hedder regex (og indeholder et regular expression-objekt), dels min og max som er nedre hhv. øvre grænse for en intervalvalidering.

Valideringsfunktionen, der kan angives til et feltvalideringsobjekt, tager 2 parametre, nemlig feltvalideringsobjektet selv og formular-elementet der skal valideres. Ud fra disse burde det være muligt at få udført en validering i de fleste tilfælde. Mere avancerede valideringer, hvor flere felter skal tages i betragtning, kan også udføres ved at aflæse form-objektet på formular-elementet (obj.form) og derfra finde det/de andre felter, som skal tages i betragtning til den enkelte validering. En validering skal dog altid hæftes på et bestemt felt (indtil videre). Valideringsfunktionen returnerer true, hvis feltets indehold er iorden og false, hvis indholdet ikke lever op til valideringen.

Valideringsobjektet skal i forbindelse med validering af en formular, sendes til en funktion, som sørger for at forholde sig til disse data. Valideringsfunktionen ser således ud:

function validerFormular(frm,valobj) {  for(var i=0; i<valobj.regler.length; i++) {    var fld = valobj.regler[i];    var obj = frm.elements[fld.felt];    // hvis der er angivet en reference til en specifik validering,    // så valideres der ud fra denne eller hvis der er angivet en     // standardvalideringen benyttes denne. Hvis der ikke er defineret    // end standardvalidering bliver funktionen sat til undefined og    // valideringen af feltet springes over.    var valFunc =        (         fld.validering ?         fld.validering :         valobj.standardvalidering       );    // kald valideringsfunktionen med valideringsdefinitionen og formular-feltet    if(typeof(valFunc) != "undefined") {      if(!valFunc(fld,obj)) {        alert(fld.tekst);        if(typeof(obj.length) != "undefined")           obj[0].focus();        else          obj.focus();        return false;      }    }  }  return true;}

Valideringen kan kaldes fra formularen således:

<form name="frmtest" onsubmit="return validerFormular(this,valideringer);">  <input type="text" name="strNavn"><br>  <input type="text" name="strAdresse"><br>  <input type="text" name="strPostnr"><br>  <input type="text" name="strBy"><br>  <input type="text" name="strLand"><br>  <input type="text" name="strTelefon"><br>  <input type="text" name="strEmail"><br>  <textarea name="strKommentar"></textarea>  <input type="submit" value="Send"><br></form>

Nu skulle rammerne til at lave deklarativ validering være på plads. Vi kan udbygge det lidt, med nogle standardfunktioner, som kan bruges til valideringen.

Den første kontrollerer om feltet har noget indhold:

function requiredFieldValidator(fld,obj) {  return obj.value != "";}

Den næste udfører en regular expression:

function regularExpressionValidator(fld,obj) {  if(fld.regex)    return fld.regex.test(obj.value);  else    return true;}

En tredie validerer et interval:

function numericRangeValidator(fld,obj) {  if(fld.min && fld.max)    return (parseFloat(obj.value) != NaN &&             parseFloat(obj.value) >= fld.min &&             parseFloat(obj.value) <= fld.max);  else if(fld.min && !fld.max)    return (parseFloat(obj.value) != NaN &&             parseFloat(obj.value) >= fld.min);  else if(!fld.min && fld.max)    return (parseFloat(obj.value) != NaN &&             parseFloat(obj.value) <= fld.max);  else    return true;}

Bemærk at de sidste to valideringsfunktioner benytter feltdefinitionens objekt til at hente yderligere oplysninger om den validering der skal foretages. Dette stiller krav til definitionen af objektet om at disse felter findes, ellers kan valideringen ikke gennemføres og den vil returnere true (altså valid).

Med ovenstående på plads kan valideringsstrukturen nu udvides til:

var valideringer = {  standardvalidering: requiredFieldValidator,  regler:[    { felt:"strNavn", tekst:"Angiv venligst navn" },    { felt:"strAdresse", tekst:"Angiv venligst adresse" },    { felt:"strPostnr", tekst:"Angiv venligst postnr" },    {      felt:"strPostnr",      tekst:"Postnr skal være et tal i intervallet 1051 til 9990",      min:1051,      max:9990,      validering:numericRangeValidator    },    { felt:"strBy", tekst:"Angiv venligst by" },    { felt:"strLand", tekst:"Angiv venligst land" },    { felt:"strTelefon", tekst:"Angiv venligst telefonnr." },    { felt:"strEmail", tekst:"Angiv venligst e-mail" },    {      felt:"strEmail",      tekst:"Der skal angives en gyldig e-mail",      regex:/^[\w\.\-_]+@[\w\-_]+\.[\w\.\-_]+$/gi,      validering:regularExpressionValidator    }  ]};

Der kan naturligvis bygges mange forskellige valideringsrutiner (generiske eller specialiserede) og de, i dette dokument, viste, kan sagtens laves mere robuste og intelligente. Jeg har umiddelbart ridset et koncept op, som du selv kan arbejde videre med, så det passer til dine specifikke behov.

God fornøjelse!