Javascript formulier controleren/valideren

[JakobH]

Hallo,

Voor mijn studie heb ik een opdracht om een formulier te controleren of alle velden zijn ingevuld. In de HTML code mag ik geen javascript gebruiken. Alle javascript code moet in een aparte .js file

Middels Javascript moet worden gecontroleerd of alle velden zijn ingevuld voordat het wordt gepost. Alle velden die niet zijn ingevuld moet worden getoond onderaan het formulier - binnen de fieldset (dus niet in een alert venster). De melding moet natuurlijk worden aangepast als het formulier wordt aangevuld en wordt gepost.

<form id="registratieFormulier" naam="test" action="xxxxxx" method="post">
		<fieldset>
			<legend>Registratieformulier</legend>
			<div>
			<label class="heading" for="naam">Naam:</label><input type="text" id="naam" name="naam" size="30"/>*</br>
			<label class="heading" for="postcode">Postcode:</label><input type="text" id="postcode" name="postcode" size="30"/>*</br>
			<label class="heading" for="huisnr">Huisnummer:</label><input type="text" id="huisnr" name="huisnr" size="30"/>*</br>
			<label class="heading" for="straat">Straat:</label><input type="text" id="straat" name="straat" size="30"/>*</br>
			<label class="heading" for="plaats">Plaats:</label><input type="text" id="plaats" name="plaats" size="30"/>*</br>
			<label class="heading" for="telefoon">Telefoon:</label><input type="text" id="telefoon" name="telefoon" size="30"/></br>
			<label class="heading" for="mobiel">Mobiel:</label><input type="text" id="mobiel" name="mobiel" size="30"/></br>
			<label class="heading" for="email">Email adres:</label><input type="text" id="email" name="email" size="30"/></br>
			<input type="submit" value="Verzend"/></br>
		</fieldset>
	</form>

In de .js file staat nu:
[js]
document.observe("dom:loaded", function() {
$("registratieFormulie").onsubmit= onsubmit;
});
[/js]
dit moet verder aangevuld worden.

De hele dag ben ik aan het proberen om dit voor elkaar te krijgen echter zonder resultaat.

Wie kan me verder op weg helpen??

 

[Kvothe]

Je moet voor elk input element de value property checken (is niet ingevuld als deze gelijk is aan "").

Qua meldingen zou ik een onzichtbaar tekstelement maken en deze zichtbaar maken indien nodig.

Overigens is het niet duidelijk of dat je schoolopdracht is of dat je een hele applicatie oid moet ontwikkelen; houd in het achterhoofd dat je altijd server side ook een validatie moet uitvoeren.

 

[JakobH]

Ik begrijp dat je de value property moet controleren of deze leeg is. Maar hoe je dat in loop in Javascript?

Dit is een gedeelte van de opdracht. Het betreft het maken van een website, één pagina moet een form bevatten. Deze form moet aan de client zijde middels javascript worden gecontroleerd of alle velden zijn gevuld. Middels de Post functie word de form op de server gepost.

 

[Kvothe]

Ik zou het expliciet per element doen (dus geen loop). Maar je kan ook een array met de elementen maken met document.getElementsByClassname, als je ze dezelfde class naam geeft. Hetzelfde kan ook met document.getElementsByTagName.

 

[JakobH]

Bedankt voor je uitleg. Ik begrijp het wel maar kan het niet vertalen naar JavaScript. Ik vindt het een verschrikkelijke opdracht, ben niet echt een programmeur.

Zou je de code voor 1 of 2 velden willen aanvullen?
Het begin van de js file staat in mijn eerste post.
Daarnaast mag ik geen enkele js code in de html file gebruiken.

Ik zou je heel dankbaar zijn.