patrickpackham/index.html

## index.html
<html>
	<head>
		<title>Assignment 2</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript" src="validate.js"></script>
	</head>

	<body>
		<div id="content">
		<h1>Register</h1>
			<form name ="register" action="" onsubmit="return validateInput()" method="post" >
				<label>Name:</label>
				<input type="text" name="name" />
				<label>E-mail:</label>
				<input type="email" name="email" />
				<label>Date of Birth:</label>
				<input type="date" name="dob" />
				<input type="submit" name="submit" />
			</form>
		</div>
	</body>
</html>

## validate.js
var name = "";
var email = "";
var dob = "";

function validateInput() {
	//retrieve all the form elements
	var validate = document.forms["register"].elements;

	//loop through and validate the input
	for (var i = 0; i < validate.length; i++) {
		var check = validate[i];

		//validate text input
		if (check.type == "text" && check.value === "") {
			displayMsg("Please fill out all fields." + check.innerHTML);
			return false;
		}

		//ensure text input is letters only
		var re = (/[a-z]/i);
		if (check.type === "text" && !re.test(check.value)) {
			displayMsg("Please enter only ");
			return false;
		}

		//ensure valid e-mail format
		var re = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
		if (check.type === "email" && !check.value.match(re)) {
			displayMsg("Please enter a valid email address");
			return false;
		}

		if (check.type === "date") {
			var finalDate = check.value.toString();
			finalDate = finalDate.replace(/-/g,"/");
		}
	}

	name = validate[0].value;
	email = validate[1].value;
	dob = finalDate;

	var id = JSON.stringify(register());
	console.log(id);
}

function register() {
	var id = $.post("http://turing.une.edu.au/~jbisho23/assignment2/register.php",
	{
		name: name,
		email: email,
		dob: dob
	});
	return id;
}

//sliding error message
function displayMsg(msg) {
	var $test = $('.msg');

	if ($test.length == 0) {
		var $form = $('form');
		$form.append('<span class="msg">' + msg + '</span>');

		var $show = $('.msg');
		$show.addClass('show');
		$show.css('display', 'none');
	}

	$show.fadeToggle(1000);

	if ($show.hasClass('out'))
	$show.removeClass('out');
}
	<html>
	<head>
	<title>Assignment 2</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="validate.js"></script>
	</head>

	<body>
	<div id="content">
	<h1>Register</h1>
	<form name ="register" action="" onsubmit="return validateInput()" method="post" >
	<label>Name:</label>
	<input type="text" name="name" />
	<label>E-mail:</label>
	<input type="email" name="email" />
	<label>Date of Birth:</label>
	<input type="date" name="dob" />
	<input type="submit" name="submit" />
	</form>
	</div>
	</body>
	</html>
	var name = "";
	var email = "";
	var dob = "";

	function validateInput() {
	//retrieve all the form elements
	var validate = document.forms["register"].elements;

	//loop through and validate the input
	for (var i = 0; i < validate.length; i++) {
	var check = validate[i];

	//validate text input
	if (check.type == "text" && check.value === "") {
	displayMsg("Please fill out all fields." + check.innerHTML);
	return false;
	}

	//ensure text input is letters only
	var re = (/[a-z]/i);
	if (check.type === "text" && !re.test(check.value)) {
	displayMsg("Please enter only ");
	return false;
	}

	//ensure valid e-mail format
	var re = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if (check.type === "email" && !check.value.match(re)) {
	displayMsg("Please enter a valid email address");
	return false;
	}

	if (check.type === "date") {
	var finalDate = check.value.toString();
	finalDate = finalDate.replace(/-/g,"/");
	}
	}

	name = validate[0].value;
	email = validate[1].value;
	dob = finalDate;

	var id = JSON.stringify(register());
	console.log(id);
	}

	function register() {
	var id = $.post("http://turing.une.edu.au/~jbisho23/assignment2/register.php",
	{
	name: name,
	email: email,
	dob: dob
	});
	return id;
	}

	//sliding error message
	function displayMsg(msg) {
	var $test = $('.msg');

	if ($test.length == 0) {
	var $form = $('form');
	$form.append('<span class="msg">' + msg + '</span>');

	var $show = $('.msg');
	$show.addClass('show');
	$show.css('display', 'none');
	}

	$show.fadeToggle(1000);

	if ($show.hasClass('out'))
	$show.removeClass('out');
	}