[HTML JAVASCRIPT] uniform error handling formulier

[Vinzzz243]

Ik ben bezig met een functie te schrijven die alle elementen van een formulier doorloopt en aan de hand van het type (text, radio, checkbox etc) een bepaalde error message weergeeft.
Basis idee van http://www.quirksmode.org/dom/error.html maar nu wil ik het volgende:

wanneer in een formulier bv 4 radiobuttons zijn opgenomen dan zorgt mijn algehele loop

JavaScript:

    var x = document.forms[formname].elements;
    for (var i=0;i<x.length;i++)

ervoor dat ook 4 x die radio elementen worden behandeld.
Dat is opzich prima, maar ik wil dan ook dat als er op 1 van de 4 radiobuttons geklikt wordt, dat dan de onchange daarvan ervoor zorgt dat alle foutmeldingen op alle radiobuttons met die naam dan verdwijnen.

Als het element een radiobutton betreft zorg ik dat ik de lengte kan opvragen met:

JavaScript:

switch (x[i].type) 
{
case 'radio':
ele = document.forms[formname].elements[x[i].name]
alert(ele.length)

Als er geen enkele van de 4 radiobuttons is aangeklikt komt er dus 4x een errormessage achter te staan, maar een klik op 1 van de 4 moet ervoor zorgen dat ALLE messages weer weggaan.

[Verwijderd]

Waarom uberhaupt 4x een errormessage? Als je nou één errormessage koppelt aan een groep radio's ben je van het hele gezeur af.

[Vinzzz243]

Verwijderd schreef op vrijdag 22 april 2005 @ 09:36:
Waarom uberhaupt 4x een errormessage? Als je nou één errormessage koppelt aan een groep radio's ben je van het hele gezeur af.

dat zou ook mogen, maar dan moet ik nog op alle radiobuttons een onchange zetten en DAT was juist t probleem.

[SchizoDuckie]

Vinzzz schreef op vrijdag 22 april 2005 @ 09:40:
[...]

dat zou ook mogen, maar dan moet ik nog op alle radiobuttons een onchange zetten en DAT was juist t probleem.

Daar heb je dus ook javascript voor. Je kan automagisch aan je forms een validation rule hangen die voro de submit getriggerd wordt.

Zoek maar eens op onSubmit();

[ Voor 9% gewijzigd door SchizoDuckie op 22-04-2005 10:38 ]

[Vinzzz243]

SchizoDuckie schreef op vrijdag 22 april 2005 @ 10:38:
[...]


Daar heb je dus ook javascript voor. Je kan automagisch aan je forms een validation rule hangen die voro de submit getriggerd wordt.

Zoek maar eens op onSubmit();

hmz die reply kan ik ff niet plaatsen
ik ben toch al lang bezig voor die submit? Het probleem ligt m bij het onchange van 1 radiobutton, dan moeten alle buttons een onchange uitvoeren zeg maar.

[Verwijderd]

lijkt mij toch een kwestie van een hulpvariabele in het leven roepen. standaard op 0 zetten en tijdens de for-loop op 1 zetten als er een radiobutton WEL aangevinkt is. zodra de variabele aan t eind van de rit nog 0 is, gaat het dus fout, is 'ie 1 dan geen foutmelding... (of denk ik nu te simpel)

[Vinzzz243]

Verwijderd schreef op vrijdag 22 april 2005 @ 11:17:
lijkt mij toch een kwestie van een hulpvariabele in het leven roepen. standaard op 0 zetten en tijdens de for-loop op 1 zetten als er een radiobutton WEL aangevinkt is. zodra de variabele aan t eind van de rit nog 0 is, gaat het dus fout, is 'ie 1 dan geen foutmelding... (of denk ik nu te simpel)

was ik ook over aan het denken. Een container aanmaken die vantevoren alle elementen naloopt en alle unieke namen van radiobuttons opslaat in een 2 dimensionaal array. Bij het loopen door mn elementen zet ik dan bij de juiste naam een 1 en controleer vervolgens in een volgende loop of hij op 1 staat of niet.

maar ook dat is niet echt het probleem.
Ik zal zo eens een testcase online zetten, ik ben niet duidelijk genoeg

[faabman]

Vinzzz schreef op vrijdag 22 april 2005 @ 10:53:
[...]

hmz die reply kan ik ff niet plaatsen
ik ben toch al lang bezig voor die submit? Het probleem ligt m bij het onchange van 1 radiobutton, dan moeten alle buttons een onchange uitvoeren zeg maar.

bij de onchange van 1 radiobutton kun je toch gewoon het volgende doen

JavaScript:

function handleRadioChangeEvent(){
  for(var i = 0; i < document.forms['idvanjeform'].elements[this.name].length; i++){
    document.forms['idvanjeform].elements[this.name][i].onchange = null;
  }
}

en dan moet je zelf maar even bepalen of je een html attribute (onchange="") meegeeft of de onchange via javascript meegeeft...

[ Voor 9% gewijzigd door faabman op 22-04-2005 11:48 . Reden: foutje in script ]

[Vinzzz243]

je foutje was gecorrigeerd

dit heb ik ook al, probleem is dan dat ik een functie removeError aanroep bij onchange, die vervolgens de zojuist via de DOM aangemaakte SPAN verwijderd, maar die is niet voor iedere button aangemaakt, alleen voor de eerste...

momentje nog voor de testcase..

[ Voor 162% gewijzigd door Vinzzz243 op 22-04-2005 11:54 ]

[Vinzzz243]

ik heb het een en ander opgelost. Formvalidatie werkt nu netjes. Alleen heb ik nog 1 probleem.
De functie removeError wordt aangeroepen en daarbinnen heb ik de naam van het form nodig (als iemand een oplossing weet (buiten de variabele globaal maken, omdat ik het ook voor meerdere forms werkend wil hebben) om dit te vermijden hoor ik dat graag), maar daarvoor moet ik parameters meegeven aan die functie, echter wanneer ik het geheel ombouw (this vervangen door de parameter etc) dan werkt het niet meer.

Nogmaals, basis is van quirksmode, ik heb de check op de andere type elementen toegevoegd en een 'handig' config-blok.

Ik heb het geheel online geplaats op
www.vinzzz.nl/got/inlog.htm
www.vinzzz.nl/got/formvalidation.js


1. ik denk dat het probleem met this te maken heeft maar ook met deze link kom ik er niet uit, wie kan me een eindje op weg helpen?
2. is het 'config-blok' handig zo, of weet iemand een betere manier om dit af te handelen (in javascript)
3. Is het wellicht 'mooier'/sneller/'beter' om niet iedere keer weer het form te moeten doorlopen als het een radiobutton betreft, maar om dit de 1e keer in een array ofzo op te slaan?

[ Voor 9% gewijzigd door Vinzzz243 op 24-04-2005 16:52 ]

[crisp]

Vinzzz schreef op zondag 24 april 2005 @ 16:49:
ik heb het een en ander opgelost. Formvalidatie werkt nu netjes. Alleen heb ik nog 1 probleem.
De functie removeError wordt aangeroepen en daarbinnen heb ik de naam van het form nodig (als iemand een oplossing weet (buiten de variabele globaal maken, omdat ik het ook voor meerdere forms werkend wil hebben) om dit te vermijden hoor ik dat graag), maar daarvoor moet ik parameters meegeven aan die functie, echter wanneer ik het geheel ombouw (this vervangen door de parameter etc) dan werkt het niet meer.

Binnen de functie removeError verwijst 'this' naar het form-element right? In dat geval verwijst this.form dus naar je formulier

[Vinzzz243]

wow thx! so easy

wat vind je van punt 2 en 3?

verbeterde linkjes:
www.vinzzz.nl/got/inlog2.htm
www.vinzzz.nl/got/formvalidation2.js

[ Voor 105% gewijzigd door Vinzzz243 op 24-04-2005 17:22 ]

[crisp]

Vinzzz schreef op zondag 24 april 2005 @ 17:15:
wow thx! so easy

wat vind je van punt 2 en 3?

Het config-blok vind ik zelf niet echt verkeerd; beter dan wat PPK vaak doet (custom attributen).
Wat ik minder vind is dat je onload gebruikt om de validatie aan je form te koppelen; als je een pagina hebt met veel plaatjes en mensen hebben een langzame verbinding dan kan dat te laat zijn.
daarbij zou ik het zo doen:

JavaScript:

document.forms['aanmelden'].onsubmit = validate;

In de functie validate() kan je dan ook met het this-keyword werken.

Bedenk verder ook dat een radio of een checkbox geen length property hoeft te hebben (als het een enkel element is en er dus geen meerdere elementen met diezelfde name zijn); daar moet je dus wel op testen in je writeError en removeError functies.

Je lookups kan je drastisch verminderen; probeer bijvoorbeeld zeker in loop-condities lookups te vermijden:

JavaScript:

if (obj.type=='radio' || obj.type=='checkbox')
{
    var el = obj.form.elements[obj.name], i = el.length;
    if (i)
    {
        while (i--)
        {
            el[i].onclick = removeError;
        }
    }
    else
    {
        el.onclick = removeError;
    }
}
else obj.onchange = removeError;

cachen van referenties lijkt me dan ook vrij zinloos aangezien dit waarschijnlijk wel snel genoeg zal zijn.

[ Voor 7% gewijzigd door crisp op 24-04-2005 17:37 ]

[Vinzzz243]

perfectemundo

wanneer moet ik die aanroep van onsubmit dan het beste doen, want nu laad ik de js in de head, en dan bestaat dat form nog niet, krijg ik dus error...

en is t verstandig om die while lus ook in validate() te doen? Ik laat dit gewoon staan, omdat anders de volgorde in het config-blok niet meer klopt en de focus verkeerd om wordt gezet...

nieuwe versie:
www.vinzzz.nl/got/inlog3.htm
www.vinzzz.nl/got/formvalidation3.js

[ Voor 21% gewijzigd door Vinzzz243 op 24-04-2005 20:44 ]

[crisp]

Die while-lus die ik toepas gaat inderdaad van achter naar voren. Ik gebruik 'm dan ook alleen als volgorde niet uitmaakt en omdat het sneller is dan een constructie waarbij je op 0 begint en elke iteratie tegen een variabele checked die de length bevat (het verschil zal marginaal zijn, maar toch).
Op zich is er ook niets mis met een een for-constructie, maar uit purisme houd ik liever declaraties buiten constructs dus grijp ik sneller naar een while

[ Voor 8% gewijzigd door crisp op 24-04-2005 22:15 ]

[Vinzzz243]

duidelijke taal zou je maybe nog een laatste tip kunnen verstrekken over die onload en mn commentaar in een vorig bericht? Ik wilde de validate al in de html onsubmit zetten, maar doe t liever in javascript...

[crisp]

Eigenlijk zou er iets van een onrenderend event moeten zijn. De enige manier om je event zo snel mogelijk te koppelen is toch door het in de markup te zetten. Hetzij direct in je form-tag, hetzij direct na de /form.
Een goed voorbeeld is het zetten van de focus op het eerste inputveld. Veel websites doen dat ook via de onload-handler. Het effect is vaak dat de gebruiker al tijdens het laden in het eerste tekstveld begint te typen en al is doorgetabbed naar het volgende veld, en dat dan ineens de onload wordt getriggered en de focus weer op het eerste veld wordt gezet. Echt supper irritant...

[Vinzzz243]

hm klopt ja...

als ik in de html dan gewoon onsubmit="return validate" zet, dan kan ik in javascript formname = this.form doen?
of kan ik in de html beter return validate(this) doen

[crisp]

als je dit doet:

HTML:

<form action="#" onsubmit="return validate()">

Dan verwijst in je functie validate het 'this' keyword naar het window object, en niet naar je form object. In dat geval zal je dus de handle naar je form als parameter mee moeten geven.
Doe je zoiets:

HTML:

<form id="foo" action="#">
...
</form>

<script type="text/javascript">
document.getElementById('foo').onsubmit = validate;
</script>

Dan kan je in de functie validate wel met het 'this' keyword werken aangezien die dan wel de juiste scope heeft.

[Vinzzz243]

Voor de volledigheid van dit topic de uiteindelijke code. Heb er voor gekozen om toch de aanroep via het formelement in de html te laten gaan (vind die extra regel javascript onder het form beetje vies).

www.vinzzz.nl/got/inlog4.htm
www.vinzzz.nl/got/formvalidation4.js

Enige wat nu nog op mn todo list staat is:
1. het form qua html zo mooi mogelijk opmaken. Wanneer labels gebruiken etc ->

code:

<label for="foo">dit is de uitleg</label>
<input id="foo">

echter kom je dan in de 'knoei' bij bv radiobuttons, daar wil je de label op de value zetten ipv de uitleg, dus:

code:

<label>dit is de uitleg</label>
<input id="foo_ja" type="radio"><label for="foo_ja">ja</label>
<input id="foo_nee" type="radio"><label for="foo_nee">nee</label>

2. per radiogroup maar 1 foutmelding geven.

iemand daar wellicht een tip over? (puntje 1)

[ Voor 16% gewijzigd door Vinzzz243 op 25-04-2005 15:08 ]