hey guys,
I have some trouble with my contact form of my website . The problem is that I have written a JavaScript function to check if all the fields were filled in and if the input is valid . Now I wrote the JavaScript in a different file witch I have include in my website but for some reason it won’t work . If i put my script in the head everything works fine but that’s not allowed . It’s a project for school .
here I provide you with the js and the html code .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Welkom bij videotheek productia
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Video's" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script type="text/javascript" src="./js/contact.js"></script>
</head>
<body>
<div id="header">
<div class="banner">
<img src="./img/banner.jpg" height="175" width="750" alt="SlideShow" />
</div>
<div class="menu">
<a href="index.html">Home</a>
<a href="overzicht.html">Overzicht</a>
<a href="portfolio.html">Portfolio</a>
<a href="betaling.html">Betaling</a>
<a href="facturatie.html">Facturatie</a>
<a class="active" >Contact</a>
</div>
</div>
<div id="body">
<div class="mid">
<p id="error"> </p>
<form id="contact" action="mailto:email@email.com" method="post" enctype="text/plain">
<p>
<label for="naam">Naam</label>
<input name="naam" id="naam" type="text" size="25" />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="text" size="25" />
</p>
<p>
<label for="onderwerp">Onderwerp</label>
<select id="onderwerp" name="onderwerp" >
<option value="Kies het onderwerp">Kies het onderwerp</option>
<option value="Vraag">Vraag</option>
<option value="Opmerking">Opmerking</option>
<option value="Fout op website">Fout op website</option>
<option value="Overig">Overig</option>
</select>
</p>
<p>
<label for="bericht">Bericht</label>
<textarea name="bericht" id="bericht" rows="9" cols="40"></textarea>
</p>
<p>
<input name="submit" type ="submit" id="submitbutton" value="Verstuur" />
<input name="reset" type="reset" value="Reset" />
</p>
</form>
</div>
</div>
<div id="footer">
<p> © Alexander Coopmans Inf 106 B </p>
</div>
</body>
</html>
Js file:
var theForm;
document.getElementById("submitbutton").addEventListener(submit, 'click', function() {
theForm.naam = $('naam').value;
theForm.email = $('email').value;
theForm.onderwerp = $('onderwerp').value;
theForm.bericht = $('bericht').value;
validateFormOnSubmit(theForm)
});
function validateFormOnSubmit(theForm) {
var reason;
reason+=checkname(theForm.naam);
reason+=validateEmail(theForm.email);
reason+=checkDropdown(theForm.onderwerp);
reason+=validateEmpty(theForm.bericht);
if (reason != "") {
document.getElementById("error")= Element("Sommige velden hebben uw aandacht nodig : \
" + reason);
return false;
}
else{
return true;
}
}
function checkDropdown(fld) {
var error = " ";
if (fld.value == "Kies het onderwerp") {
fld.style.background = 'Red';
error = "U hebt geen keuze gemaakt uit de keuzelijst.\
";
}
else{
fld.style.background = 'White';
}
return error;
}
function checkname (fld) {
var error = "";
if (fld.value == "") {
fld.style.background = 'Red';
error = "U hebt geen naam ingevuld.\
";
}
else{
fld.style.background = 'White';
}
var magniet = '/[\\(\\)\\<\\>\\,\\;\\:\\\\\\/"\\[\\]]/]';
if (fld.value.match(magniet)) {
fld.style.background = 'Red';
error="De naam bevat verboden tekens.\
";
}
else{
fld.style.background = 'White';
}
return error;
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "Je hebt geen bericht geschreven.\
"
} else {
fld.style.background = 'White';
}
return error;
}
function trim(s)
{
return s.replace(/^\\s+|\\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\\.[^@]*\\w\\w$/ ;
var illegalChars= /[\\(\\)\\<\\>\\,\\;\\:\\\\\\"\\[\\]]/ ;
if (fld.value == "") {
fld.style.background = 'Red';
error = "Je heb geen e-mail adres ingevuld .\
";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Red';
error = "Vul een geldig e-mail adres in alstublieft.\
";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Red';
error = "Het e-mail adres bevat niet toegelaten tekens.\
";
} else {
fld.style.background = 'White';
}
return error;
}
