Thanks , but is it also possible to be normal again if i fill the form name in …
As Mark suggested in post 14, I would add and remove an error class from to/from the affected elements.
Well i tried that , but :
nameInput.className = nameInput.className.replace(“error”, “”);
is not matching with my codes
so i have to name it something else?
I’m sorry. I don’t understand what you mean.
Can you post a minimal code example that I can run on my PC (and please use code tags).
function validateForm() {
var name = form["name"].value,
address = form["address"].value,
city = form["city"].value;
if (name === "") {
form["name"].style.border = "solid 1px red";
alert("Vul uw naam in.");
}
if (city === "") {
form["city"].style.border = "solid 1px red";
alert("Vul uw plaats in.");
}
if (address === "") {
form["address"].style.border = "solid 1px red";
alert("Vul uw adres in.");
}
return false;
}
var form = document.getElementById("aanmelden");
form.onsubmit = validateForm;
i tried something like this :
if (name != "") { form["name"].style.border = "solid 1px White
but that’s not good .
You really need to do this by applying a class to the element you want to style.
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form</title>
<style>
form{padding: 15px}
label{display: inline-block; text-align: right; width:60px; padding-right:5px;}
input[type=submit]{margin-top: 20px;}
.error{background: red;}
</style>
</head>
<body>
<form action="" method="post" id ="aanmelden">
<div>
<label>Name:</label>
<input type="text" name="name" placeholder="Name">
</div>
<input type="submit" />
</form>
<script>
function validateForm() {
var nameInput = form["name"];
if (nameInput.value === "") {
alert("First name cannot be left blank.");
nameInput.className += " error";
return false;
}
else {
nameInput.className = nameInput.className.replace("error", "");
}
}
var form = document.getElementById("aanmelden");
form.onsubmit = validateForm;
</script>
</body>
</html>
Off Topic:
Please don’t quote my reply back at me. It makes the thread very long.
Thanks it works
Yay! 
Okee , now i have to do some hard stuff …
this is my HTML
<!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" 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>
I have to do these things:
- If "Wies lid " is ja (yes) -> lidnummer has to be 6 numbers and WIES pin had to be 4 numbers
- If i fill the field " postcode " in with this for example “1234ab” and leave that box , it has to change into “1234AB”
And returning to my last question ( Error if blank ) , I have to get one error box for all the erros.
So it has to say something like this :
" you have to fill in name "
" you have to fill in city "
Hi there,
Let’s start with this then.
You will want to attach an onblur event handler to the text field and upcase any letters in the field using the toUpperCase() method.
Here’s an example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Upcase on blur</title>
</head>
<body>
<input type="text" id="myInput">
<script>
var myInput = document.getElementById("myInput");
myInput.onblur = function(){
var newValue = this.value.toUpperCase();
this.value = newValue;
}
</script>
</body>
</html>
Try to apply that to your code and let me know how you get on.
Well that worked thanks !
This is what i have now.
The thing what i have to do now is :
- Remove error if a fill one of those error fields in .
- Check at least one of the 3 options in " INSCHRIJVING"
than i am done
<!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="" 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>
<div id="error_name"></div>
<input type="text" name="name" maxlength="25" size="25">
<label class="right">Bedrijf:</label>
<input class="right" type="text" name="company" maxlength="25" size="25">
<br/>
<label>Adres:</label>
<div id="error_address"></div>
<input type="text" name="address" maxlength="25" size="25"> <br />
<label>Postcode:</label>
<input type="text" name="postalcode" id="postalcode" onblur="upperCase()" maxlength="6" size="6"> <br />
<script>
function upperCase(){
var x=document.getElementById("postalcode");
x.value=x.value.toUpperCase();
}
</script>
<label class="right">Plaats:</label>
<div id="error_city"></div>
<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="6" 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" >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" >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" 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>
</body>
</html>
function Validate(form) {
var error_name = "";
var error_address = "";
var error_city = "";
if (form.name.value.length == 0) {
form.name.style.border = "1px solid red";
form.name.style.backgroundColor = "#FFCCCC";
error_name += "Name cannot be left blank!";
}
if (form.address.value.length == 0) {
form.address.style.border = "1px solid red";
form.address.style.backgroundColor = "#FFCCCC";
error_address += "Address cannot be left blank!";
}
if (form.city.value.length == 0) {
form.city.style.border = "1px solid red";
form.city.style.backgroundColor = "#FFCCCC";
error_city += "City cannot be left blank!";
}
if (error_name.length > 0) {
document.getElementById("error_name").innerHTML = error_name ;
}
if (error_address.length > 0) {
document.getElementById("error_address").innerHTML = error_address ;
}
if (error_city.length > 0) {
document.getElementById("error_city").innerHTML = error_city ;
}
return false;
}
document.getElementById("aanmelden").onsubmit = function () {
return Validate(this);
};
#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;
}
#error_name, #error_address, #error_city {
color: red;
}
Ok, then let’s look at removing the errors.
What you need to do is to put the CSS in a class, then add and remove that class accordingly.
Here’s another demo for you (taken from post 26):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form</title>
<style>
form{padding: 15px}
label{display: inline-block; text-align: right; width:60px; padding-right:5px;}
input[type=submit]{margin-top: 20px;}
.error{background: red;}
</style>
</head>
<body>
<form action="" method="post" id ="aanmelden">
<div>
<label>Name:</label>
<input type="text" name="name" placeholder="Name">
</div>
<input type="submit" />
</form>
<script>
function validateForm() {
var nameInput = form["name"];
if (nameInput.value === "") {
alert("First name cannot be left blank.");
nameInput.className += " error";
return false;
}
else {
nameInput.className = nameInput.className.replace("error", "");
}
}
var form = document.getElementById("aanmelden");
form.onsubmit = validateForm;
</script>
</body>
</html>
Try and apply that to your code and see how far you get.
Also, when you post your code again, please post a complete HTML document containing the CSS and JS (as I have done here).
That way, it is easier for me to copy the code and run it on my PC.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Creating Forms</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<style>
#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;
}
.required {color: red;}
input:focus
{
border: 1px solid red;
}
</style>
<body>
<form action="index.html" name="validate_form" method="post" id ="aanmelden" onsubmit="return all_fields(this);">
<script type ="text/javascript" >
function all_fields(validate_form){
var rtn=true;
for(var fields=["form_name","form_address", "form_city"],note,obj,i=0;i<fields.length;i++){
note=alpha_field(validate_form[fields[i]]);
obj=document.getElementById(fields[i].replace('form_',''));
obj.innerHTML='';
if (note){
obj.innerHTML=note;
rtn=false;
}
}
return rtn;
}
function alpha_field(v)
{
//var condition = true;
var note = "";
if(v.value == "" || v.value.length == 0)
{
v.style.background = '#FFCCCC';
v.focus();
//condition = false;
note = "Dit veld is verplicht!";
}
else
{
v.style.background = '#FFFFFF';
}
//return condition;
return note;
}
</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="form_name" maxlength="25" size="25">
<div class="required" id="name" ></div>
<label class="right">Bedrijf:</label>
<input class="right" type="text" name="company" maxlength="25" size="25">
<br/>
<label>Adres:</label>
<input type="text" name="form_address" maxlength="25" size="25"> <br />
<div class="required" id="address" name="address"></div><br />
<label>Postcode:</label>
<input type="text" name="postalcode" id="postalcode" onblur="upperCase()" maxlength="6" size="6"> <br />
<script>
function upperCase(){
var x=document.getElementById("postalcode");
x.value=x.value.toUpperCase();
}
</script>
<label class="right">Plaats:</label>
<div id="error_city"></div>
<input class="right" type="text" name="form_city" maxlength="25" size="25">
<div class="required" id="city" name="city"></div>
<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="6" 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" >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" >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" 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>
</body>
</html>
That works now thanks !
so the only thing i have to do now are
Choose at least one of the options “inschrijving”
and i forgot , If “wies-lid” is “ja” , there must be things filled in …
That’s two things
Here is a method for ensuring that a radio button is selected:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Radio example</title>
</head>
<body>
<form action="" id="myForm">
<input type="radio" value="male" class="gender">Male<br>
<input type="radio" value="female" class="gender">Female
<input type="submit" />
</form>
<script>
var form = document.getElementById("myForm"),
buttons = document.getElementsByClassName("gender");
form.onsubmit = function(){
var genderSelected = false;
for (var i=0, len = buttons.length; i < len; i++){
if(buttons[i].checked == true){
genderSelected = true;
}
}
if(genderSelected === false){
alert("Please select a gender");
return false;
}
}
</script>
</body>
</html>
Try implementing this into your code and let me know how you get on.
I tried , but it won’t work . is it possible in javascript to have 2 validations ?
Sorry, I don’t understand what you mean. Could you elaborate?
Off Topic:
Please don’t quote my replies back at me unless relevant. This makes the thread very long.
well , i changed the names into my used names , a copied your javascript function into mine , without result
Can you post your code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Creating Forms</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<form action="index5.html" name="validate_form" method="post" id ="aanmelden" onsubmit="return all_fields(this);">
<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="form_name" maxlength="25" size="25">
<div class="required" id="name" ></div>
<label class="right">Bedrijf:</label>
<input class="right" type="text" name="company" maxlength="25" size="25">
<br/>
<label>Adres:</label>
<input type="text" name="form_address" maxlength="25" size="25"> <br />
<div class="required" id="address" name="address"></div><br />
<label>Postcode:</label>
<input type="text" name="postalcode" id="postalcode" onblur="upperCase()" maxlength="6" size="6"> <br />
<script>
function upperCase(){
var x=document.getElementById("postalcode");
x.value=x.value.toUpperCase();}
</script>
<label class="right">Plaats:</label>
<div id="error_city"></div>
<input class="right" type="text" name="form_city" maxlength="25" size="25">
<div class="required" id="city" name="city"></div>
<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="6" 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" class="23apr" >Hele dag<br />
<input type="radio" name="day" class="23apr">Ochtend<br />
<input type="radio" name="day" class="23apr">Middag<br /><br />
<input type="checkbox" name="lunch" class="23apr" />Inclusief Lunch <br/>
</div>
<div>
<label>22 April:</label><br /><br />
<input type="radio" name="day2" value="entire" >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" 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>
</body>
</html>
function all_fields(validate_form){
var rtn=true;
for(var fields=["form_name","form_address", "form_city"],note,obj,i=0;i<fields.length;i++){
note=alpha_field(validate_form[fields[i]]);
obj=document.getElementById(fields[i].replace('form_',''));
obj.innerHTML='';
if (note){
obj.innerHTML=note;
rtn=false;
}
}
return rtn;
}
function alpha_field(v)
{
var note = "";
if(v.value == "" || v.value.length == 0)
{
v.style.background = '#FFCCCC';
v.focus();
note = "Dit veld is verplicht!";
}
else
{
v.style.background = '#FFFFFF';
}
return note;
}
function checkCheckBoxes(theForm) {
var form = document.getElementById("index.html"),
buttons = document.getElementsByClassName("23apr");
form.onsubmit = function(){
var 23aprSelected = false;
for (var i=0, len = buttons.length; i < len; i++){
if(buttons[i].checked == true){
23aprSelected = true;
}
}
if(23aprSelected === false){
alert("Please select a dagdeel");
return false;
}
}
#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;
}
.required {color: red;}
input:focus
{
border: 1px solid red;
}
There is an error in your JS.
A JS variable cannot start with a number:
var 23aprSelected = false;