Formulier validatie

Status
Niet open voor verdere reacties.
H

hkurd

Nieuwe gebruiker
Lid geworden
6 nov 2013
Berichten
1
Hallo,

Ik moet een formulier valideren op lege velden voor naam, adres en plaats.
Wanneer een veld leeg is moet het veld ook rood gekleurd worden. ( MET CSS)
De errors wil ik in mijn html te zien krijgen , dus geen popups .
Het lukt me niet echt ...

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Creating Forms</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body> 

<form action="index.html" method="post" id ="aanmelden">
<script type ="text/javascript" src="j1.js"> </script>

<div id="form" >
<h3>Aanmelding WIES Congres</h3>
<p class="legend">Deelnemer</p>
<fieldset class="input2" id="Deelnemer">
<label>Naam:</label>
<input type="text" name="name" required="required" maxlength="25" size="25"> 
<label class="right">Bedrijf:</label>
<input class="right" type="text" name="company" maxlength="25" size="25">	
<br/>
<label>Adres:</label>
<input type="text" name="address" maxlength="25" size="25"> <br />
<label>Postcode:</label>
<input type="text" name="postalcode" maxlength="6" size="6"> <br />
<label class="right">Plaats:</label>
<input class="right" type="text" name="city" maxlength="25" size="25">
<label>Land</label>
<select name="country">
<option value="" selected="selected">Nederland</option>
<option value="">België</option>
<option value="">Luxemburg</option>
<option value="">Duitsland</option>
<option value="">Frankrijk</option>
</select><br /><br />
<label class="labelwies">Wies lid:</label>
<input type="radio" name="member" value="yes">Ja
<input type="radio" name="member" value="no" checked="checked">Nee<br />
<label class="labelwies">Nummer:</label>
<input type="text" size="20" maxlength="10" placeholder="123"/><br />
<label class="labelwies">WIES Pin:</label>
<input type="password" size="20" maxlength="4" />
</fieldset>
<p class="legend">Inschrijving</p>
<fieldset id="Inschrijving">
<div class="divleft">
<label>23 April:</label><br /><br />
<input type="radio" name="day" value="entire" checked="checked">Hele dag<br />
<input type="radio" name="day" value="morning">Ochtend<br />
<input type="radio" name="day" value="midday">Middag<br /><br />
<input type="checkbox" name="lunch" value="lunch" />Inclusief Lunch <br/>
</div>
<div>
<label>22 April:</label><br /><br />
<input type="radio" name="day2" value="entire" checked="checked">Hele dag<br />
<input type="radio" name="day2" value="morning">Ochtend<br />
<input type="radio" name="day2" value="midday">Middag<br /><br />
<input type="checkbox" name="lunch2" value="lunch2" />Inclusief Lunch <br />
</div>
</fieldset>
<p class="legend">Enquete</p>
<fieldset id="Enquete">
<label>Functie:</label>
<input type ="radio" name="function" checked="checked" value="Manager"> Manager
<input type ="radio" name="function" value="Informatieanalist">Informatieanalist
<input type ="radio" name="function" value="Ontwikkelaar">Ontwikkelaar
<input type ="radio" name="function" value="Docent">Docent
<input type ="radio" name="function" value="Overig">Overig<br />
<label class="labelenquete">Vakgebied:</label>
<select name="branche" multiple="multiple"> 
<option value="Automatisering">Automatisering</option>
<option value="Onderwijs">Onderwijs</option>
<option value="Overheid">Overheid</option>
<option value="Industrie">Industrie</option>
<option value="handel">Handel</option>
<option value="gezondheidszorg">Gezondheidszorg</option>
<option value="bank_en_verzekeringen">Bank en Verzekeringen</option>
<option value="Telecommunicatie">Telecommunicatie</option>
<option value="Overige">Overige</option>
</select><br/>
<label class="labelenquete">Bedrijfsgrootte:</label>
<select name="personeel">
<option value="weining">0-10</option>
<option value="mkb">10-50</option>
<option value="mkbgroot">50-100</option>
<option value="zakelijk">100-500</option>
<option value="grootzakelijk">500 of meer</option>
</select>
</fieldset>
<p class="legend">Opmerkingen</p>
<fieldset id="opmerkingen">
<textarea name="company" cols="40" placeholder="Typ hier eventuele opmerkingen" rows="5"></textarea>	
</fieldset>
<p id="buttons">
<input type="submit" value="aanmelden" />
</p>
</form>
</div>
</body>
</html>

Code: 
function validateForm() {
  var name = form["name"].value,
  address = form["address"].value,
  city = form["city"].value;
  
  if (name === "") {
    alert("Name cannot be left blank.");
   
  
  }
  if (address === "") {
    alert("Address cannot be left blank.");

  }
  if (city === "") {
    alert("City cannot be left blank.");
    return false;
  }
}
 var form = document.getElementById("aanmelden");
      form.onsubmit = validateForm;
Code: 
@charset "UTF-8";
/* CSS Document */

#form { font-family: Verdana, sans-serif; width: 40em; }
fieldset {
	background: #C361D2;
	border: none;
	margin-bottom: 1em;
	width: 40em;
	padding-top: 1.5em;
	position: static;
}

p.legend 
{ background: #ded983; 
color: black; 
padding: .2em .3em; 
font-size: 1.2em; 
width: 10em; 
border: 2px outset #ded983; 
position: relative; 
margin-bottom: -1em;
margin-left: 1em; 
margin-top: 1em; 
}

#choice_selection{
		width: 260px;
		margin-left: 20px;
		}
		
#Deelnemer { 
background: #f3b4f5; 
border: outset #f3b4f5; 
}

#Inschrijving{ 
background: #f3b4f5; 
border: outset #f3b4f5; 
}

#Enquete{ 
background: #f3b4f5; 
border: outset #f3b4f5; 
}

#opmerkingen{ 
background: #f3b4f5; 
border: outset #f3b4f5; 
}

		
.form{
width: 750px;
margin: 0 auto;
padding: 5px;
}

select {
margin left: 10em;
}

label {
float: left;
display: block;
width: 80px;
padding-top: .2em;
height: 10px;
position: relative;
margin-left: 5px;
}

label.long {
width: 130px;
}

fieldset.right{
		float:right;
		width: auto;
}
fieldset.left {
	float: left;
	width: auto;
}
fieldset label.right {
		float:right;
		right: 17em;
}

input.right {
float: right;
}

#Enquete label {
float: left;
}

.labelenquete {
float: left; width: 150px; 
} 

.labelwies {
float: left; width: 11em; 
left: 5em;
} 

.divleft {
	float:left;
	width: 20em;
	}
	
.error {
  background: red;
}
 
Even kijken of ik het begrijp:

Dit zorgt er voor dat de onclick aan de submit button wordt geplakt:
Code: 
     var form = document.getElementById("aanmelden");
     form.onsubmit = validateForm;

Hier wordt de javascript code aangeroepen welke de onsubmit verbind :
Code: 
    <form action="index.html" method="post" id ="aanmelden">
    <script type ="text/javascript" src="j1.js"> </script>

Zover ik na kan gaan heeft HTML de knop nog niet geplaatst op het moment dat jij probeert er een onsubmit aan te plakken, dit zal dus niet gaan werken.
Ik denk ook dat wanneer je een errorconsole opent, je zult zien dat de knop nog niet bestaat.

De meest simpele oplossing is om het script pas helemaal onderaan je html pagina aan te roepen.
Een andere optie is om onDocumentReady te gebruiken om je onsubmit te koppelen, dan weet je zeker dat alles geladen is.
Nog een andere optie is om de submit gewoon op te roepen middels een onclick welke je in de HTML-code van de knop op neemt.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan