Validate form javascript loopt toch door.

[soulprovider]

Hoi,

Ik ben een Wordpress site aan het maken,
In deze site wil ik ook 5 verschillende Forms maken.
Voor deze Forms wil ik één validation script maken, waarbij ik met argumenten alle soorten velden
(textfield, selectbox, radiobuttons, checkbox) kan validaten.
Nu heb ik al een stukje script dat werkt tot aan het alert, maar hoewel er "return false;" staat loopt het script toch door.

Kan iemand mij helpen?

dit is mijn script voor alleen een textfield om te checken of het veld leeg is en wat er moet gebeuren (alert en focus):

function formValidator(){

		EmptyField (document.getElementById('naam'), "Vul uw voorletters en achternaam in.");
                //EmptyField (document.getElementById('straatnaam'), "Vul de straatnaam in.");//Dit zou de volgende regel zijn
}

function EmptyField(elem, helperMsg){
       if(elem.value == ""){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
            return false;
       }
       else { return true;}
}

De eerste regel van mijn form is:

<form onSubmit="return formValidator()" method="post" action="http://server-pc/dendekker/?page_id=248">

de action pagina is een wordpress pagina met als template een php script die de waardes in een database stopt (dit werkt trouwens wel)
en vervolgens doorlinkt naar een pagina "bedankt".

 

[Naarling]

Kun je niet beter gewoon deze module gebruiken om je formulieren te bouwen? Dan zit de validatie al ingebakken voor zover ik kan zien.

 

[soulprovider]

Thanx voor de tip, deze ken ik, maar ik heb ook al een rekenmachine die mij verteld hoeveel 3678 x 6734 is.
Ik vind het leuk om mijn kennis te vergroten door het zelf te doen...

 

[Naarling]

Waarom gebruik je dan Wordpress?

Maar goed, het probleem is dat return false; wel een functie onderbreekt maar niets doet met de voortgang van het event, zo werkt javascript nu eenmaal. Gelukkig is je probleem makkelijk op te lossen. event.preventDefault() doet namelijk wel wat je nodig hebt, behalve in IE8 en ouder natuurlijk, daarvoor heb je event.returnValue = false; nodig, je functie komt er dan zo uit te zien.

function EmptyField(elem, helperMsg){
       if(elem.value == ""){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
            if (event.preventDefault) //kijkt of preventDefault ondersteund wordt.
              { event.preventDefault(); }
            else //zo niet, dan wordt returnValue gebruikt.
              { event.returnValue = false; }
            return false;
       }
       else { return true;}
}

Dat zou moeten werken.
Je hebt bij het inline script in je <form> trouwens geen return nodig, simpelweg de functie aanroepen volstaat.

EDIT: Vergeet trouwens niet dat alleen javascript validatie niet voldoende is, die kunnen mensen namelijk vrij makkelijk uit zetten, je zult ook altijd op de server moeten controleren of de ingevoerde gegevens wel kloppen.

 

[Supersnail]

Ik denk dat het probleem iets anders is. De functie EmptyField levert wel true of false op, maar niet de functie formValidator. In dit geval kan je dit makkelijk veranderen door [js]EmptyField (document.getElementById('naam'), "Vul uw voorletters en achternaam in.");[/js] te veranderen in [js]return EmptyField (document.getElementById('naam'), "Vul uw voorletters en achternaam in.");[/js]
Als je dit voor meerdere velden wilt controleren moet je met een variable in formValidator bijhouden of een van de EmptyFields false opgeleverd heeft, en zo ja, false laten opleveren.

@Naarling, hoe onlogisch het ook is, als je in een formulier onSubmit = "return functienaam()" gebruikt en die functie levert false op wordt het formulier niet verstuurd.

 

[Naarling]

@Naarling, hoe onlogisch het ook is, als je in een formulier onSubmit = "return functienaam()" gebruikt en die functie levert false op wordt het formulier niet verstuurd.

Huh, weer wat geleerd

 

[soulprovider]

Thanx voor de info,

Na wat proberen gisteren werkte dit ook, of is dit wat je bedoelde Supersnail?

function formValidator(){

      if (EmptyField (document.getElementById('naam'), "Vul uw voorletters en achternaam in.") == false) { return false;}
      else if (EmptyField (document.getElementById('straatnaam'), "Vul de straatnaam in.") == false) { return false;}

      else { return true;}
}

function EmptyField(elem, helperMsg){
       if(elem.value == ""){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
            return false;
       }
}

En ja naarling, ik moet ook nog een serverside validation maken in php....leuke uitdaging toch?

 

[Supersnail]

Dat is wat ik bedoelde, hoewel ik de uitwerking iets anders voor ogen had. De kern is in ieder geval dat de functie "formValidator" true of false moet opleveren.