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 .

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> &copy; Alexander Coopmans Inf 106 B </p>
</div>

</body>

</html>

Js file:

PHP Code:


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 : \n" 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.\n";
    }
    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.\n";

    }
    else{
        
fld.style.background 'White';

    }
    var 
magniet '/[\(\)\<\>\,\;\:\\\/"\[\]]/]';
    if (
fld.value.match(magniet)) {
        
fld.style.background 'Red';
        
error="De naam bevat verboden tekens.\n";

    }
    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.\n"
    
} 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 .\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Red';
        error = "
Vul een geldig e-mail adres in alstublieft.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Red';
        error = "
Het e-mail adres bevat niet toegelaten tekens.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;