veld per veld valideren?

[Killerclown]

Ik heb een probleempje met een formvalidation. Ik heb dit in Javascript gemaakt en dan in mijn HTML pagina geplaatst. Nu moeten er verschillende velden gevalideerd worden en wanneer een veld niet is ingevuld verschijnt er een bericht. Wanneer ik geen enkel veld invul, krijg ik zo'n 5 tal berichten op mijn scherm.
Is het mogelijk om bijvoorbeeld eerst veld 1 te valideren en als dit niet is ingevuld er maar 1 bericht verschijnt om dat veld in te vullen en voor de andere niet ingevulde velden nog geen bericht te laten verschijnen. Indien het ingevuld is, veld 2 valideren en indien niet ingevuld, een bericht.

Ik heb volgende code samengesteld maar dan verkrijg ik verschillende berichten wanneer geen van de velden is ingevuld.

Dit staat in de Head

function validate_form ( )
{
	valid = true;

        if ( document.contact_form.naam1.value == "" )
        {
                alert ( "Gelieve uw Naam in te vullen" );
                valid = false;
        }
        	
		if ( document.contact_form.voornaam1.value == "" )
        {
                alert ( "Gelieve uw Voornaam in te vullen" );
                valid = false;
        }
        return valid;

}

//-->

</script>

Alvast dank.

 

[bn2vs]

Hey, je kan het heel wat korter doen. Ik weet niet meer precies hoe de js syntaxis in elkaar zit, en kan het nu ff niet nazien, maar waarcshijnlijk heb je wel wat aan deze pseudocode

function validate_form()
{

voor elk textveld in document.contact_form
{
if (!validate_field(textveld)) { return false; }
}
volgend veld

}

function validate_field(txtField)
{
var isValid = txtField.value.trim != ""
if (!isValid){ alert ( "Gelieve het veld " + txtField.name + " in te vullen" ); }
return isValid
}

 

[Killerclown]

Hey, je kan het heel wat korter doen. Ik weet niet meer precies hoe de js syntaxis in elkaar zit, en kan het nu ff niet nazien, maar waarcshijnlijk heb je wel wat aan deze pseudocode

function validate_form()
{

voor elk textveld in document.contact_form
{
if (!validate_field(textveld)) { return false; }
}
volgend veld

}

function validate_field(txtField)
{
var isValid = txtField.value.trim != ""
if (!isValid){ alert ( "Gelieve het veld " + txtField.name + " in te vullen" ); }
return isValid
}

Alvast heel veel dank voor mij te helpen maar ik heb toch nog een beetje hulp nodig. Ik ben niet zo goed thuis in Javascript. Ben nog maar aan het leren.
Dit ziet er inderdaad logisch uit als ik het zo bekijk. Toch zit ik met een probleem: het werkt niet :-( en ik zie het niet waarom :-s

Alvast dank.

 

[Killerclown]

HELP!!! Wat doe ik mis???

Ik heb al volgend stukje code samengesteld:

<script type="text/javascript">

<!--

function validate_form ( )
{
	valid = true;

        if ( document.contact_form.naam1.value == "" )
        {
        		document.contact_form.naam1.style.background = "yellow";
				document.contact_form.naam1.focus()
				alert ( "Gelieve uw Naam in te vullen" );
                } else {
				document.contact_form.naam1.style.background = "white";
				valid = false;
        }
			
		if ( document.contact_form.voornaam1.value == "" )
        {
				document.contact_form.voornaam1.style.background = "yellow";
				document.contact_form.voornaam1.focus()
				alert ( "Gelieve uw Voornaam in te vullen" );
				} else {
				document.contact_form.naam1.style.background = "white";
				valid = false;
        }
        return valid;

}

//-->

</script>

Nu heb ik volgende 2 problemen:

1) Wanneer je het veld naam en het veld voornaam niet invuld, dan verschijnt er een message op het scherm. Ik verkrijg 2 messages (voor zowel voornaam als naam). Is het niet mogelijk om eerst alleen het message van Naam te laten zien en de message van Voornaam niet en wanneer er dan op Submit gedrukt wordt en Voornaam is nog niet ingevuld, dan pas de message van Voornaam.
Hopelijk leg ik dat hier wat verstaanbaar uit.

2.) Mijn 2de probleem: Mijn formulier wordt verzonden ook al is er niets ingevuld. Ik krijg 2 keer een message op mijn scherm en vervolgens verstuurd em het formulier. Nochtans mag het niet verzonden worden aangezien de velden nog niet zijn ingevuld.
Wat doe ik mis???

Hopelijk kan iemand mij wat licht in het duister brengen.

Alvast dank.

 

[nosoupforyou]

je kan als je minder code wilt gebruiken de objecten gewoon in een arraytje stoppen...

//je moet wel de id's van de objecten zetten naar naam1 en voornaam1 voor als je nog niet had

function checkForm() {

  toFillInObjects = new Array();
  toFillInObjects[] = 'naam1';
  toFillInObjects[] = 'voornaam1';

  valid = true;

  for(var i = 0; i < toFillInObjects.length; i++) {
    object = document.getElementById( toFillInObjects[i] );
    if(object.value == '') {
        alert( toFillInObjects[i] +" moet wel worden ingevuld heh?");
        valid = false;

       //ja verander je focus en dergelijke
    }
    else {

       //ja doe je ding
    }  
  }

  return valid;

}

als je nu gewoon in je formpje zet (onsubmit is geloof ik het event)

onsubmit="return checkForm();"

Ik heb de code niet gechecked op spelfouten of iets dergelijks, als dit niet werkt moet je ff kijken waar het mis gaat, maar das het idee

greets NoSoupForYou


Aanpassing:
je kan de code van bn2vs een beetje gebruiken voor wat nettere code en je hoeft geen array aan te maken als je door elk veld in het form loopt..
maarja sommige velden kunnen optioneel zijn dus ja, je moet maar ff kijken