// Note:  You MUST have an empty div with an id of "errorMessages" above your form.
// Also, if you want to format the errors, include a CSS class called .errors in your stylesheet.
//
//  Error Style Example
/*

.errors {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #F00;
	padding-left: 20px;
	font-weight:bold;
}

*/
//
//  <div id="errorMessages"></div>
//
// This is where the error messages will be displayed.

// You must populate this with the names of the form fields you want to be validated.
// For each one, you need to enter the name, and also the error message to display
// Be careful with the braces and the commas (there is no , after the last one)
var requiredFields = [
	["name", "Full name is required"],
	["email", "Valid e-mail is required"],
	["phone", "Phone number is required"]
];


window.onload = function()
{

	// find the submit button on the first form, and setup onclick event
	for (var i = 0; i < document.forms[0].elements.length; i++)
	{
		if (document.forms[0].elements[i].type == "submit")
		{
			document.forms[0].elements[i].onclick = validate;
		}
	}


}

function validate()
{
	var valid = true;
	var messages = new Array();

	// loop through the required fields
	for (var i = 0; i < requiredFields.length; i++)
	{
		if (document.forms[0].elements[requiredFields[i][0]].value == "")
		{
			messages[messages.length] = requiredFields[i][1];
			valid = false;
		}
	}
	
	if (!valid)
	{
		displayErrors(messages);
	}

	return valid;
}

function displayErrors(messages)
{
	var buf = "<ul class='errors'>";
	for (var i = 0; i < messages.length; i++)
	{
		buf += "<li>" + messages[i] + "</li>";	
	}
	buf += "</li>";
	
	document.getElementById("errorMessages").innerHTML = buf;
}