JS validation on form

Question

I have a form which I am trying to validate with JS. Problem is for the life of me I can’t get it to work.

Can anybody tell me where I’m going wrong? In the example below I am just rying to validate the Email field.

Regards, Marc

function validateEmail() {
    var x = document.forms["myForm"]["Email"].value;
	if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

#contact-area {

	width: 500px;
	max-height:200px;
	margin-top: 0px;
	float:left;
}

#contact-area input, #contact-area textarea {

	padding: 3px;
	width: 520px;
	font-family:'Lato', sans-serif;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	border: 1px solid #ccc;
}

#contact-area textarea {

	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {

	border: 1px solid #ffc423;
}

#contact-area input.submit-button {

	width: 100px;
	float: left;
	background-color:#ffc423;
	color:black;
	margin-top:13px;
	cursor:pointer;
}

#contact-area input.submit-button:hover {
	background-color:#002b51;
	color:white;
}

label {

	float:left;
	text-align:left;
	margin-right:15px;
	width:100px;
	padding-top:10px;
	padding-bottom:5px;
	font-size:15px;
	color:#ffc423;
	font-weight:700;
}

textarea { 
    resize: none; 
}

<div id="contact-area">
			
						<form method="post" action="contactengine.php" name="myForm" onsubmit="return contact-validation()">
						<label for="Name">Name:</label>
						<input type="text" name="Name" id="Name">
				
						<label for="Company">Company:</label>
						<input type="text" name="Company" id="Company">
	
						<label for="Email">Email:</label>
						<input type="email" name="Email" id="Email">
				
						<label for="Message">Message:</label>
						<textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>

						<input type="submit" name="submit" value="Submit" class="submit-button">
						</form>
			
					<div style="clear: both;"></div>
			
					</div>

Answer 1

This is wrong:

onsubmit="return contact-validation()">

1. You have no JavaScript method called contact-validation().

2. Even if you did, dashes are not valid in function names.

Try this instead:

onsubmit="return validateEmail()">

Answer 2

Change

x = document.forms["myForm"]["Email"].value;

to

x = document.getElementById("Email").value;

It targets the element directly by its id so if the DOM structure changes your JavaScript will still work. Also, the validation is checking the Email input, but the error message is for Name. You may want to leverage HTML5 validation with the required attribute as well.

You should also avoid the onsubmit attribute as it tightly couples the HTML and JavaScript. This can be achieved by the following:

<!-- use a button instead of an input for buttons, it is more semantically correct -->
<button id="btn-submit">Submit</button>

<script>
document.getElementById("btn-submit").addEventListener("click", function(evt){
    evt.preventDefault();
    if (validateEmail()) {
        document.getElementById("myForm").submit();
    } 
});
</script>

Remove the onsubmit= from the form tag if you use this approach.