Controle of minimaal 1 veld is ingevuld

[Bertus Bolknak]

Hallo,

Ik heb in mijn pagina een form met een bepaalde hoeveelheid text fields.

Zie hier: http://www.combifit.nl/wielerkleding/helpmij.php

Alle textfields zien er zo uit (zelfde id, maar steeds een verschillende naam):

<input name="1S" type="text" id="maat" size="4" maxlength="3" />

Ik wil een alert tonen als iemand op de "Naar stap 2" knop klikt zonder minimaal één textfield ingevuld te hebben. Daarom roep ik in de openings form tag een Javascript functie aan op deze manier:

<form onSubmit="return checkForEmptyFields()"id="form1" name="form1" method="post" action="stap2.php">

De Javascript functie ziet er als volgt uit:
[JS]function checkForEmptyFields() {
var input = document.getElementById('maat'); // alle inputvelden verzamelen
//alert(input.length)
var teller = 0;
for (var i = 0; i < input.length; i++) {
if (input.value != ""){
teller++;
}
}
if (teller > 0){
return (true)
}
else {
alert("Er is niks ingevuld.");
return (false)
}
}[/JS]

Affijn, tot zover mijn poging, want het lukt niet. De alert wordt namelijk altijd getoond, ook al vul ik wel een veld in. Ik vermoed dat er in de functie iets fout gaat bij het definieren van de variabele "input". Dit wordt vermoedelijk geen array, waardoor de repeat loop niet ingezet kan worden. Hopelijk wil iemand mij hier even doorheen helpen (bijvoorbeeld met voorbeeld code).

O ja, en is het ook te maken dat er een alert getoond wordt als er geen integer ingevuld is (maar bijvoorbeeld per ongeluk een spatie of een letter)?

Groeten Bertus.

 

[That Guy]

Nou... het hele idee van een ID (ha ha ha...) is dat het een unieke waarde is. Afgekort van Identifier. Een 'name' mag wel hetzelfde zijn. Als je al je namen nou hetzelfde houd, en de id's veranderd, kan je dit doen: in plaats van

[JS]var input = document.getElementById('maat'); // alle inputvelden verzamelen
[/JS]

-->[JS]var input = document.getElementsByName('naaaaaam'); // alle inputvelden verzamelen[/JS]en er dan doorheenloopen (returnt een array met elementen).


Daarnaast klopt dit niet, moet even een spatie tussen:

<form onSubmit="return checkForEmptyFields()"id="form1" name="form1" method="post" action="stap2.php">

-->

<form onsubmit="return checkForEmptyFields();" id="form1" name="form1" method="post" action="stap2.php">

:thumb:

 

[Bertus Bolknak]

Hallo Vegras, bedankt voor je reactie,

Nou je 't zegt ja, dom van mij. Een Id moet natuurlijk uniek zijn. Maar goed als ik al die namen van de textfields hetzelfde maak, hoe kan ik dan in stap2.php werken met de verschillende ingevulde waardes? Want die waardes wil ik doorgeven en met php uitlezen met bijv. $_POST['1S']. Wordt een beetje lastig als ze allemaal dezelfde naam hebben.
Dus de namen moeten wel verschillend blijven.
Is er nog een andere manier om mijn doel te bereiken?


Bertus.

 

[Frats]

Je kunt van de namen ook een array maken, dan krijgt PHP ook een lijst door.

Dit zou moeten werken (niet 100% zeker maar ik ga er vanuit dat javascript er niet moeilijk over gaat doen)

<input type="text" name="lijst[]" />

Je bent dan wel de koppeling kwijt tussen id en output. Je kunt volgensmij ook zelf de values van je keys opgeven:

<input type="text" name="lijst[veld1]" />
<input type="text" name="lijst[veld2]" />

Ik zou er even mee experimenteren

Een alternatief is om een library zoals JQuery te gebruiken, daarmee zijn dit soort dingen veel makkelijker.

 

[That Guy]

Uiteraard. Maar tegenwoordig worden niet alleen names, maar ook id's gebruikt als form-posting, als ik het goed heb.

In ieder geval: er zijn nog veel meer getElementByXXX()-functies - zoals ClassName en TagName. Of je kan er zelf een bouwen! Dat is natuurlijk het leukste.

Wat dacht je van deze: je loopt door alle input-velden met type 'text'. Van deze ga je controleren of ze wel vol zijn. Zoiets:[JS]var elems = document.getElementsByTagName('input');

var i, l = elems.length;

for(i=0; i<l; i++)
{
if(elems.getAttribute('type') == 'text' && elems.value == '')
{
alert('Oh noes! Je hebt veld ' + (i+1) + ' niet ingevuld!');
}
}[/JS]:thumb:

[edit]oh noes, Frats was me voor!

Je kan inderdaad ook de names in een array zetten, dan kan je wel gewoon getElementsByName('naam[]') gebruiken. Wat je zelf het liefste hebt. Zoals altijd raad ik een jsLib af bij dit soort, simpelere, dingen.[/edit]

 

[Frats]

Ow ik vind JQuery juist ideaal, ik raad het overal voor aan Het is veel korter en simpeler dan plain javascript, en het werkt nog op alle browsers ook

Het is echt de moeite waard om die gewoon te leren en overal voor te gebruiken.

 

[Bertus Bolknak]

Iedereen natuurlijk hartstikke bedankt voor alle reacties, maar inmiddels drijven we wel weg van mijn vraag. Ik ben geen Javascript kenner (anders stelde ik hier natuurlijk niet van dit soort vragen).
Mijn doel is tweeledig:
1) Controleren of er minimaal 1 veld is ingevuld (dat is dus net even wat anders dan een standaard form validation (die bijvoorbeeld in Dreamweaver zit)).
2) En ALS het dan ingevuld is (of meerdere velden, dat kan ook), dan moet het ook een integer zijn.
Voorbeelden:
Iemand vult geen enkel veld in --> Alert
Iemand vult in één veld een 3 in --> mag door
Iemand vult in 4 velden een willekeurige integer in --> mag door.
Iemand vult in 3 velden een integer in, maar in 1 veld per ongeluk een letter of spatie (non-integer) --> Alert.

Zie verder mijn openingsvraag van deze thread voor meer details.

Hoop dat ik het zo duidelijk uitleg.
Hulp is zeer welkom.

Bertus.