javascript controleformulier...

webgirl18 · 3 jul 2008

Zou iemand mij hier mee kunnen helpen? ik kom er echt niet mee uit. Dit is voor jullie misschien een makkie, maar voor meisjes zoals ik erg lastig
Het is een klein formuliertje waarin gegevens ingevult en gecontroleerd moeten worden.
Het uiterlijk moet zo blijven, alleen ik krijg de controle codering niet voor elkaar.
Wie helpt mij??????

dank je!!! :thumb:

De gebruiker moet alle verplichte gegevens correct invullen.
Zo moet bij het email adres een @ en een . aanwezig zijn.
De postcode moet uit 4 cijfers en 2 letters bestaan.
en telefoonnummer uit 10 cijfers.

Als de gegevens niet goed zijn dan moet er achter in tekst vermeld worden dat het niet klopt en opnieuw ingevult moet worden.

Als de gebruiker bij contact verzoek aangeeft dat hij gebelt wil worden moet het telefoonnummer ook zijn ingevult... anders moet er vermeld worden dat hij zijn telefoonnummer nog in moet vullen.

Als hij een vraag heeft moet deze ingevuld zijn en het email adres moet dan juist ingevuld zijn.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

Code:

<body>

	<div id="container">
		<p>
			Vul onderstaand formulier in en wij nemen dan via telefoon of email contact met u op.  
		</p>
		<form name="contactverzoek" id="contactverzoek" action="bevestiging.html" method="get">
			
			<fieldset id="nawfieldset">
				<legend>naw gegevens</legend>
				
				<div>
					<label for="voornaam">voornaam</label>
					<input type="text" name="voornaam" id="voornaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>
					<label for="achternaam">achternaam</label>
					<input type="text" name="achternaam" id="achternaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>
					<label for="straatnaam">straatnaam</label>
					<input type="text" name="straatnaam" id="straatnaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>				
					<label for="huisnummer">huisnummer</label>
					<input type="text" name="huisnummer" id="huisnummer" value="" size="4" /> <span class="required">*</span>
				</div>
				
				<div>				
					<label for="postcode">postcode</label>
					<input type="text" name="postcode" id="postcode" value="" size="7" /> <span class="required">*</span>
				</div>
				
				<div>			
					<label for="woonplaats">woonplaats</label>
					<input type="text" name="woonplaats" id="woonplaats" value="" /> <span class="required">*</span>
				</div>
								
			</fieldset>
			
			<fieldset id="contactfieldset">
				<legend>contactgegevens</legend>
				
				<div>
					<label for="telefoon">telefoon</label><input type="text" name="telefoon" id="telefoon" value="" /> <span class="required">invullen indien u gebeld wilt worden</span>
				</div>
				
				<div>
					<label for="email">email adres</label><input type="text" name="email" id="email" value="" /> <span class="required">invullen indien u een vraag heeft</span>
				</div>
				
			</fieldset>
			
			<fieldset id="requestfieldset">
				<legend>contactverzoek</legend>
				
				<div>
					<label for="bellen">bel mij aub</label><input type="radio" name="contacttype" id="bellen" value="bellen" />
				</div>
				
				<div>
					<label for="mailen">ik heb een vraag</label><input type="radio" name="contacttype" id="mailen" value="mailen" />
				</div>
				
				<div>				
					<label for="mijnvraag">mijn vraag</label>
					<textarea name="mijnvraag" id="mijnvraag" rows="4" cols="25"></textarea><span class="required">invullen indien u een vraag heeft</span>
				</div>			
			</fieldset>
			
			<fieldset>
				<input type="submit" value="verstuur" />
			</fieldset>
			
		</form>
	
	</div>

</body>
</html>

peter vazed · 3 jul 2008

http://developer.apple.com/internet/webcontent/validation.html

http://www.google.nl/search?q=valid...s=org.mozilla:de-DE:official&client=firefox-a

webgirl18 · 4 jul 2008

Zoals ik al zei, ik ben niet de meest handige in javascript...

Misschien is er iemand die een stukje script in het formulier kan krijgen zodat het werkt?
Of is dit niet alleen moeilijk voor mij?

nosoupforyou · 4 jul 2008

hoi

Code:

 [B]<script type="text/javascript" language="javascript">

function checkForm() {
	 
	    //je kan alle elementen met een id gemakkelijk oproepen door
			voornaam = document.getElementById('voornaam');
			if(voornaam == '') {
			   return false;
			}
			
			//diet moet je dan doen voor elk veld
			
			return true;	 
	}

</script>[/B]


<form name="contactverzoek" id="contactverzoek" action="bevestiging.html" method="get" [B]onsubmit="return checkForm();"[/B]>
			
			<fieldset id="nawfieldset">
				<legend>naw gegevens</legend>
				
				<div>
					<label for="voornaam">voornaam</label>
					<input type="text" name="voornaam" id="voornaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>
					<label for="achternaam">achternaam</label>
					<input type="text" name="achternaam" id="achternaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>
					<label for="straatnaam">straatnaam</label>
					<input type="text" name="straatnaam" id="straatnaam" value="" /> <span class="required">*</span>
				</div>
				
				<div>				
					<label for="huisnummer">huisnummer</label>
					<input type="text" name="huisnummer" id="huisnummer" value="" size="4" /> <span class="required">*</span>
				</div>
				
				<div>				
					<label for="postcode">postcode</label>
					<input type="text" name="postcode" id="postcode" value="" size="7" /> <span class="required">*</span>
				</div>
				
				<div>			
					<label for="woonplaats">woonplaats</label>
					<input type="text" name="woonplaats" id="woonplaats" value="" /> <span class="required">*</span>
				</div>
								
			</fieldset>
			
			<fieldset id="contactfieldset">
				<legend>contactgegevens</legend>
				
				<div>
					<label for="telefoon">telefoon</label><input type="text" name="telefoon" id="telefoon" value="" /> <span class="required">invullen indien u gebeld wilt worden</span>
				</div>
				
				<div>
					<label for="email">email adres</label><input type="text" name="email" id="email" value="" /> <span class="required">invullen indien u een vraag heeft</span>
				</div>
				
			</fieldset>
			
			<fieldset id="requestfieldset">
				<legend>contactverzoek</legend>
				
				<div>
					<label for="bellen">bel mij aub</label><input type="radio" name="contacttype" id="bellen" value="bellen" />
				</div>
				
				<div>
					<label for="mailen">ik heb een vraag</label><input type="radio" name="contacttype" id="mailen" value="mailen" />
				</div>
				
				<div>				
					<label for="mijnvraag">mijn vraag</label>
					<textarea name="mijnvraag" id="mijnvraag" rows="4" cols="25"></textarea><span class="required">invullen indien u een vraag heeft</span>
				</div>			
			</fieldset>
			
			<fieldset>
				<input type="submit" value="verstuur" />
			</fieldset>
			
		</form>

ik weet niet zeker of je de return checkForm() bij de onsubmit moet gebruiken of of je gewoon checkForm() moet zetten en de return weg moet laten, maar ik zou het eerst met return proberen.

in de checkform javascript functie return je dan gewoon false als er iets fouts is ingevuld.

Ik wil er wel even bijzeggen dat ik liever nooit alleen javascript validatie gebruik, omdat mensen ook zelf een formpje als jou kunnen maken en dan naar de process pagina van jou kunnen submitten en dan heb je alsnog ongeldige waardes.. Hou dus rekenening dat als je form submit dat je op de process pagina alsnog controles uitvoerd...

in ieder geval hoop dat je nu wat verder komt

mvg NoSoupForYou

webgirl18 · 4 jul 2008

Bedankt NoSoupForYou.

Je controleertop die manier of er "iets" is ingevuld, maar zo voldoe ik nog niet aan de eisen. Ik kan nog steeds aangeven dat ik gebeld wil worden, maar ik kan als gebruiker van dit formulier zo niet herinnerd worden dat ik mijn telefoonnummer moet invullen.
Wil ik een vraag stellen dan moet ik mijn emailadres invullen.

De postcode moet uit 4 cijfers en 2 letters bestaan.
en telefoonnummer uit 10 cijfers.

nosoupforyou · 4 jul 2008

hoi,

ja dat begrijp ik,
ik wou alleen even laten zien hoe je moest beginnen en hoe je in jou form die code implementeerd...

je kan nu toch zelf via die andere site die peter vazed gaf controleren op dingen..
bijvoorbeeld als je op die pagina (zie hier) kijkt bij checkPhone of checkEmail of iets dergelijks.. dan zie je

Code:

var stripped = strng.replace(/[\(\)\.\-\ ]/g, '');
//strip out acceptable non-numeric characters
if (isNaN(parseInt(stripped))) {
   error = "The phone number contains illegal characters.";
}

die code en die code

Code:

if (!(stripped.length == 10)) {
	error = "The phone number is the wrong length.
	  Make sure you included an area code.\n";
}

dan pak je mijn javascript functie checkForm er even bij.. en voeg je gewoon toe

Code:

//vraag je telefoon element op...
telefoon = document.getElementById('telefoon');

//verander je even de bovenste code van dat scriptje of die site
var stripped = telefoon.replace(/[\(\)\.\-\ ]/g, '');

//en dan plak je rest van script eronder
if (isNaN(parseInt(stripped))) {
  //je kan ook een message geven en dan return false doen
  alert('geen geldige tel');
  //false teruggeven
   return false; 
}

//volgende tel check eronder plakken
if (!(stripped.length == 10)) {
   return false;
}

en dat staat er ook over e-mail en andere dingen
(ik weet namelijk ook niet alle checks en regex uit mijn hoofd, das een kwestie van proberen en debuggen)

greets NoSoupForYou

nosoupforyou · 4 jul 2008

oww sorry ik begreep hem een beetje verkeerd,

je kan dan ophalen of er gebeld moet worden:

Code:

bellen = document.getElementById('bellen');
if(bellen.checked) {
  //dan kan je hier dus die telefoon check doen (want bellen is ingevuld)
}

Code:

if(!bellen.checked) {
  //dit betekent dat bellen niet is ingevuld
}

dit moet op precies dezelfde manier voor email alleen dan moet de check iets anders zijn

greets..

webgirl18 · 5 jul 2008

klaar

Thanx!!

Van mij mag dit gesloten worden!:thumb::thumb::thumb:

javascript controleformulier...

webgirl18

Nieuwe gebruiker

peter vazed

Meubilair

webgirl18

Nieuwe gebruiker

nosoupforyou

Gebruiker

webgirl18

Nieuwe gebruiker

nosoupforyou

Gebruiker

nosoupforyou

Gebruiker

webgirl18

Nieuwe gebruiker

Nieuwste berichten

Wij waarderen jouw privacy