form validator

form.html

<h3>header</h3>

<form method="POST" id="myform" action="echo/html">
    <label for="foo">First Name:</label>
    <input type="input" id="foo">
    <br>
    <label for="bar">Last Name:</label>
    <input type="input" id="bar">
    <br>
    <label for="baz">Email:</label>
    <input type="input" id="baz">
    <br>
    <input type="submit">
</form>
<div id="debugger"></div>

validate.js

// Place ID's of all required fields here.
	var required = ["foo", "bar"],
	errmessage = "Please fill out this field.";
	$(":input").focus(function(){		
	   if ($(this).hasClass("highlight") ) {
			$(this).val("").removeClass("highlight");
	   }
	});

	$("#myform").submit(function(){	
		//Validate required fields
		for (i=0;i<required.length;i++) {
			var input = $('#'+required[i]);
			if (input.val() == "" || input.val() == errmessage) {
				input.addClass("highlight");
				input.val(errmessage);
			} else {
				input.removeClass("highlight");
			}
		}
//if any inputs on the page have the class 'needsfilled' the form will not submit
		if ($(":input").hasClass("highlight")) {
			return false;
		} else {
			return true;
		}
	});