login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Formuliervalidatie: functie lijkt dubbel te worden gecalld. Waarom?

Offline FrankieC - 02/12/2013 15:55 (laatste wijziging 02/12/2013 15:57)
Avatar van FrankieCLid Op www.gezondezorg.org/upts-tryout.php heb ik een vragenlijstformulier staan. Eerst dient men één van de twee zorgsoorten te selecteren, boven de tabel. Vervolgens dient men op de drie hoofdpunten A, B en C een score te geven. Dat wordt gecheckt door drie afzonderlijke scripts (welke nog meer doen), die door de functie checkAllAndSend() van de Verzend-knop gecalld worden.

Als (op de correcte wijze) scores gegeven worden gaat alles goed. En als op geen der hoofdpunten een score gegeven wordt, komen keurig de omissiealerts op en wordt het formulier niet ingestuurd. Maar in dat geval komt na het C-omissiealert (alleen) het A-omissiealert opnieuw op. De checkASection()-functie lijkt dan dus twee maal te worden gecalld. Waarom is dat en hoe corrigeer ik dat? Ik krijg geen scriptfoutmelding van Firebug en de HTML is valide HTML5.

De betreffende scripts staan onderaan in het scriptblok, dat weer onderaan in de broncode staat. Ik heb voor het testgemak de D-checkfunctie uitgeschakeld. De functie checkAllAndSend() is als volgt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function checkAllAndSend() {
  2.     var careLocation = upssForm.elements["care-location"];
  3.     if (careLocation[0].checked == true) {
  4.         checkASection();
  5.         checkBSection();
  6.         checkCSection();
  7.         //checkDSection();
  8.         if ((checkASection() == false) || (checkBSection() == false) || (checkCSection() == false) /*|| (checkDSection() == false)*/)
  9.             return false;
  10.         else {
  11.             upssForm.submit();
  12.             upssForm.reset();
  13.         }
  14.     }
  15.     else if (careLocation[1].checked == true) {
  16.         checkASection();
  17.         checkBSection();
  18.         //checkDSection();
  19.         if ((checkASection() == false) || (checkBSection() == false) /*|| (checkDSection() == false)*/)
  20.             return false;
  21.         else {
  22.             upssForm.submit();
  23.             upssForm.reset();
  24.         }
  25.     }
  26.     else {
  27.         alert('U dient bovenaan nog aan te geven welke soort zorg het betreft.');
  28.         return false;
  29.     }
  30. }

3 antwoorden

Gesponsorde links
Offline Thomas - 02/12/2013 16:43
Avatar van Thomas Moderator Dat is vreemd, zie zo gauw niets vreemds (in vergelijking met de andere checkfuncties). wellicht leveren de volgende kanttekeningen iets op:
- je submit-button is van het type "button", wat ik zou doen (weet niet of die meer gangbaar is) is een onsubmit-event maken met return hierin, dus <form action="..." onsubmit="return checkAllAndSend()"> en dan een button- of input-tag van het type "submit", er staat mij nog iets bij uit het verleden dat verschillende browsers verschillende events gaan lopen afvuren als je een formulier op een bepaalde manier in elkaar zet; indien false wordt geretourneerd, wordt het formulier niet verzonden, ingeval van true wel, ik geloof dat dat zich wel hetzelfde gedroeg tussen verschillende browsers
- waarom een .reset(), gooit dit niet alle formulier inhoud weg?
- waarom roep je de checks twee keer aan (voor A: regel 4,5,6 en vervolgens in regel 8, voor B: regel 16 en 17, en vervolgens regel 19)? is een keer niet genoeg? 
- heb je overwogen om jQuery te gebruiken in plaats van native JavaScript? of een ander framework-achtig iets wat crossbrowser-compatible is?

Je zou het op de bovenstaande manier kunnen proberen (form met onsubmit + button of inputveld van type submit) en dan kijken of dat vreemde gedrag dan nog steeds optreedt...

Indien het bovenstaande ook niet werkt: strip je formulier net zolang totdat je de foutmelding niet meer krijgt. Het laatste ding wat je dan hebt weggehaald is de boosdoener .
Offline FrankieC - 02/12/2013 18:33 (laatste wijziging 02/12/2013 19:18)
Avatar van FrankieC Lid Hey FangorN,

Dank dat je me probeerde te helpen! Inmiddels heb ik de oplossing aangedragen gekregen. Zo moet de functie er uit zien:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function checkAllAndSend() {
  2.     var careLocation = upssForm.elements["care-location"];
  3.     if (careLocation[0].checked == true) {
  4.         var aResult = checkASection();
  5.         var bResult = checkBSection();
  6.         var cResult = checkCSection();
  7.         //var dResult = checkDSection();
  8.         if ((aResult == false) || (bResult == false) || (cResult == false) /*|| (dResult == false)*/)
  9.             return false;
  10.         else {
  11.             upssForm.submit();
  12.             upssForm.reset();
  13.         }
  14.     }
  15.     else if (careLocation[1].checked == true) {
  16.         var aResult = checkASection();
  17.         var bResult = checkBSection();
  18.         //var dResult = checkDSection();
  19.         if ((aResult == false) || (bResult == false) /*|| (dResult == false)*/)
  20.             return false;
  21.         else {
  22.             upssForm.submit();
  23.             upssForm.reset();
  24.         }
  25.     }
  26.     else {
  27.         alert('U dient bovenaan nog aan te geven welke soort zorg het betreft.');
  28.         return false;
  29.     }
  30. }
Offline Thomas - 02/12/2013 19:37 (laatste wijziging 02/12/2013 19:44)
Avatar van Thomas Moderator haha, ik heb het.

De boosdoener is "lazy evaluation".

Eerste alert is van de aanroep van checkASection() op regel 16.
Tweede alert is van de aanroep van checkBSection() op regel 17.
Derde alert is van het eerste deel van je if-statement.

En je had de oplossing inmiddels al.

EDIT: lazy evaluation:
true || <whatever> retourneert altijd true, er wordt niet naar <whatever> gekeken, het resultaat was toch al true

false && <whatever> retourneert altijd false, er wordt niet naar <whatever> gekeken, het resultaat zal toch false blijven

in dat if-statement wordt dus het "checkA() == false" deel uitgevoerd, dit zorgde voor je extra alert. En "false == false" is equivalent aan true.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.205s