Client side validering af formularer er ofte noget noget vi slås med i dynamicweb. Man har én mulighed og det er: skal feltet være udfyldt eller ej. Med det plugin jeg har skrevet om herunder tror jeg vi får nogle flere muligheder for at validere vores formularer. Med modulet har jeg taget udgangspunkt i vores behov til Dyanmicweb, men det kan sagtens benyttes til andre formularer.
Formularen
Herunder er der et typisk eksempel på en Dynamicweb formular. Den er yderst simpel og indeholder ikke ID’er på input-felterne man har ikke meget at gå efter når de skal vælges ud. For eksemplets skyld, har jeg valgt at udelade en del af dynamicwebs html. Der følger derudover et simpelt javascript med, som kan validere udvalgte felter, men kun for om de er udfyldt eller ej. Ofte har vi behov for at tjekke om brugeren indtaster en gyldig email, dato eller endda et tal.Dynamicweb formscript
function onFormSubmit() {
if (document.Form1.elements["input1"].length) {
for (i = 0; i
Dynamicweb formular
<form id="Form1" action="" onsubmit="return onFormSubmit()">
<div>
<input name="input1" value="blah" />
<input name="input2" value="1234" />
<input name="input3" value="rune@gronkjaer.dk" />
<input name="input4" value="" />
<input name="input5" value="12345" />
<input name="input6" value="12 01 2010" />
<input name="submit" type="submit" value="submit" />
</div>
</form>
Min løsning
Min løsning tager højde for Dynamicwebs egen submit javascript, som jeg lader køre, hvis formularen gennemfører pluginets validering.
Herunder har jeg lavet en testopsætning af hvordan pluginet kan benyttes til ovenstående formularopsætning.
Pluginet startes i dokumentets ready event, som affyres efter browseren har læst dokumentet igennem.
Valideringsplugin
jQuery(function() {
/*
valArr er en samling af valideringer der skal køres på en eller flere formularer.
Det er ikke nødvendigvis alle valideringer der skal køres på samme formular
Pluginet vil teste om formularen indeholder nogle af felterne, men først on submit.
Rækkefølgen for er: valideringstype, css select der skal ramme feltet, fejlbesked,
et antal ekstra parametre (bestemmes af valideringstypen)
*/
var valArr = [["isalphanumeric", "[name=input1]", "input1 skal være bogstaver"],
["isNumeric", "[name=input2]", "input2 skal være et tal"],
["isMail", "[name=input3]", "input3 skal være en email"],
["notempty", "[name=input4]", "input4 skal udfyldes"],
["isLength", "[name=input5]", "input5 skal være 5 karakterer", 5],
["isDate", "[name=input6]", "input6 skal være en dato"]],
/*
settings skal sendes med i ReadyValidate metoden, når man gør een
eller flere formularer klar til validering
*/
settings = {
//Af typen function
//Hvis valideringen mislykkes fyres denne event.
onValidateFalse: fail,
//Af typen function
//Hvis valideringen går godt fyres denne event.
onValidateTrue: yessir,
//valiederingsparametrene
valArr: valArr
};
/*
Med jQuery selectes én eller flere formularer.
Der kaldes derefter ReadyValidate, med vores settings.
Nu er formularen klar og bliver valideret når den submittes.
*/
jQuery("#Form1").ReadyValidate(settings);
});
function fail() {
alert("fail");
}
function yessir() {
alert("yes sir");
}
Validerings pluginet
Herunder er koden til mit plugin. Den er todelt og består af jQuery udvidelsen, samt en valideringsklasse, med en række statiske valideringsmetoder.
Validater klassen kan også benyttes til valideringer udenom pluginet. Pluginet er fuld af kommentarer der forklarer brugen.
jQuery.fn.ReadyValidate = function(settings) {
//Udvider settings
settings = jQuery.extend({
//Af typen function
//Hvis valideringen mislykkes fyres denne event.
onValidateFalse: null,
//Af typen function
//Hvis valideringen går godt fyres denne event.
onValidateTrue: null,
//valiederingsparametrene
valArr: null
}, settings);
//Hvis nogle formularer er valgt går vi videre
if (this[0]) {
//Hver formular behandles selvstændigt.
//Det er altså muligt at håndtere flere formularer på samme side.
this.each(function() {
//formularens egen submit gemmes
var submit = this.onsubmit,
//formularen jQueryfiseres
jQform = jQuery(this);
//formularens egen submit fjernes
this.onsubmit = null;
//Vi binder vores egen event til formularens onSubmit
jQform.bind("submit", function() {
/*
Når formularen submittes kommer vi hertil
Valideringsarrayet køres igennem og for
hver af dem tjekker vi om feltet skal
valideres og om det så også validerer.
*/
var invalids = [];
for (var i = 0; i 0);
},
// returnerer true hvis string'en kun indeholder disse karakterer A-Å eller a-Å
isalpha: function(str) {
var re = /[^a-zA-ZæøåÆØÅ]/g;
if (re.test(str)) { return false; }
return true;
},
// returnerer true hvis string'en kun indeholder tal fra 0-9
isnumeric: function(str) {
var re = /[\D]/g;
if (re.test(str)) { return false; }
return true;
},
// returnerer true hvis string'en kun indeholder disse karakterer eller tal
// A-Å, a-å or 0-9
isalphanumeric: function(str) {
var re = /[^a-zA-Z0-9æøåÆØÅ]/g;
if (re.test(str)) { return false; }
return true;
},
// returnerer true hvis string'ens længde er præcis "len"
islength: function(str, len) {
return str.length === len;
},
// returnerer true hvis string'ens længde er mellem "min" og "max"
islengthbetween: function(str, min, max) {
return (str.length >= min) && (str.length 12 || y 2100) { return false; }
if (m === 2) {
var days = ((y % 4) === 0) ? 29 : 28;
} else if (m === 4 || m === 6 || m === 9 || m === 11) {
var days = 30;
} else {
var days = 31;
}
return (d >= 1 && d
Eksempel
Prøv at ændre lidt på teksterne herunder. Som standard validerer de alle sammen.
Jeg har valgt at ændre en smule på scriptet, så formularen ikke submitter rigtigt, for at gøre eksemplet hurtigere at teste.
