/*
	This script validates the contact us fields using Regular Expressions
	The Regular Expressions in this function contains the following filter types:
	
	  i) Numbers and Symbols (-.) plus whitespace
	 ii) Letters and Symbols (-&#;) plus whitespace
	iii) Letters, Numbers and Symbols (-,.;£$%!&@?) plus whitespace
	 iv) Email format only
	 
	The whole function is enclosed and executed by calling checkFields()
	First we create some variable references to the form fields, 
	we opt for two character labels to reduce file byte size.
	
	This is followed by a variable labelled 'validated' which we set to 0(zero). 
	This variable will be incremented for every check returned false or that has failed.
	
	We then create a function per Regular Expression filter, each function returning a true or false
	statement when passing a string value. The function can be broken down to a few lines of code;
	
	   i) We set the Regular Expression conditions
	  ii) We use Regular Expression method '.test' to test the string passed via a variable object called 'str'.
	 iii) We enclose the test in an 'if' statement returning a result of true or false.

	Now we are ready to validate the fields. To do this we create an 'if' statement for each form field testing whether
	the value is: 
	
	   i) Contains placeholder text 
	  ii) Empty
	 iii) We then call the appropriate Regular Expression filter passing the form field value between the parentheses.
	 
	 Sample 'if' conditional statement:
		if ((fn.value != "Please enter your first name")&&(fn.value != "")&&(alphaSymbols(fn.value))){
		}
	
	We can now add in commands for 'if' statement returning 'true' and you can add in an 'else' for the corresponding false
	condition.
	
	In the below function I've added commands that sets the fields to:
	
	on error:
	   i) focus the field
	  ii) turn pink background and change the text red
	 iii) change the value to placeholder text
	  iv) decrement the variable value for 'validated' 
	
	when valid:
	   i) reset the background and text to black and white
	  ii) increment the variable value for 'validated'
	  
	To submit the form values to the next page we simply check whether the value of 'validated' 
	equals the number of form fields being validated in this function.
	
	NOTE: the order by which the form fields are placed in this function is in reverse. 
	The reason for this is that when the validation process runs the script - 
	we focus on the erroneous field in reverse so that the last field to hold focus 
	is the uppermost field from the bottom otherwise the last field (the message box) will always have focus.
*/
function checkFields(){
	// Variable references to fields by id
	var fn = document.getElementById('firstname');
	var sn = document.getElementById('surname');
	var cn = document.getElementById('company');
	var jt = document.getElementById('jobtitle');
	var pc = document.getElementById('postcode');
	var tn = document.getElementById('telephone');
	var em = document.getElementById('email');
	var cm = document.getElementById('cemail');
	var mm = document.getElementById('message');
	var pw = document.getElementById('password');
	var sb = document.getElementById('sb');
	
	var validated = 0; // error counter
	//alert("start is "+validated);
	
	// Numbers only, spaces, dashes, dots
	function numericSymbols(str){
		var regex = /[^0-9.,\s]/g
		if (regex.test(str)) return false;
		return true;
	}
	// Letters only, spaces, dashes, ampersands, semi-colons
	function alphaSymbols(str){
		var regex = /[^abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\-&#:;\s]/g
		if (regex.test(str)) return false;
		return true;
	}
	// Alphanumerics, spaces, dashes, dot, commas, ampersands, semi-colons, pound, dollar, percent, exclamation, at, question mark
	function alphaNumericSymbols(str){
		var regex = /[^\w\-,.:;£$%!&@?\s]/g
		if (regex.test(str)) return false;
		return true;
	}
	// Alphanumerics, spaces
	function alphaNumeric(str){
		var regex = /[^\w\s]/g
		if (regex.test(str)) return false;
		return true;
	}
	// something@something.something
	function emailFormat(str){
		var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
		return regex.test(str);
	}

	if ((pw.value != "Empty!")&&(pw.value != "")){
		pw.style.color = "#000";
		pw.style.backgroundColor = "#fff";
		pw.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href = "#password";
		pw.value = "Empty!";
		pw.style.color = "#cc0033";
		pw.style.backgroundColor = "#ff9999";
		pw.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((alphaNumericSymbols(mm.value))){
		mm.style.color = "#000";
		mm.style.backgroundColor = "#fff";
		mm.style.borderColor = "#000";
		//validated = validated+1;
	}
	else{
		location.href = "#message";
		mm.value = "Invalid character used. Please retype your message here";
		mm.style.color = "#cc0033";
		mm.style.backgroundColor = "#ff9999";
		mm.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((cm.value != "Confirm your email")&&(cm.value != "")&&(cm.value == em.value)){
		cm.style.color = "#000";
		cm.style.backgroundColor = "#fff";
		cm.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href="#cemail";
		cm.value = "Confirm your email";
		cm.style.color = "#cc0033";
		cm.style.backgroundColor = "#ff9999";
		cm.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((em.value != "Enter your email")&&(em.value != "")&&(emailFormat(em.value))){
		em.style.color = "#000";
		em.style.backgroundColor = "#fff";
		em.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href="#email";
		em.value = "Enter your email";
		em.style.color = "#cc0033";
		em.style.backgroundColor = "#ff9999";
		em.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((tn.value != "")&&(numericSymbols(tn.value))){
		tn.style.color = "#000";
		tn.style.backgroundColor = "#fff";
		tn.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href = "#telephone";
		tn.value = "Enter your telephone number";
		tn.style.color = "#cc0033";
		tn.style.backgroundColor = "#ff9999";
		tn.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((alphaNumericSymbols(pc.value))){
		pc.style.color = "#000";
		pc.style.backgroundColor = "#fff";
		pc.style.borderColor = "#000";
		//validated = validated+1;
	}
	else{
		location.href = "#postcode";
		pc.value = "Please type your postcode here";
		pc.style.color = "#cc0033";
		pc.style.backgroundColor = "#ff9999";
		pc.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((alphaNumericSymbols(jt.value))){
		jt.style.color = "#000";
		jt.style.backgroundColor = "#fff";
		jt.style.borderColor = "#000";
		//validated = validated+1;
	}
	else{
		location.href = "#jobtitle";
		jt.value = "Please enter your job title";
		jt.style.color = "#cc0033";
		jt.style.backgroundColor = "#ff9999";
		jt.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((alphaNumericSymbols(cn.value))){
		cn.style.color = "#000";
		cn.style.backgroundColor = "#fff";
		cn.style.borderColor = "#000";
		//validated = validated+1;
	}
	else{
		location.href = "#company";
		cn.value = "Please enter your company name";
		cn.style.color = "#cc0033";
		cn.style.backgroundColor = "#ff9999";
		cn.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((sn.value != "Please enter your surname")&&(sn.value != "")&&(alphaSymbols(sn.value))){
		sn.style.color = "#000";
		sn.style.backgroundColor = "#fff";
		sn.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href = "#surname";
		sn.value = "Please enter your surname";
		sn.style.color = "#cc0033";
		sn.style.backgroundColor = "#ff9999";
		sn.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	if ((fn.value != "Please enter your first name")&&(fn.value != "")&&(alphaSymbols(fn.value))){
		fn.style.color = "#000";
		fn.style.backgroundColor = "#fff";
		fn.style.borderColor = "#000";
		validated = validated+1;
	}
	else{
		location.href = "#firstname";
		fn.value = "Please enter your first name";
		fn.style.color = "#cc0033";
		fn.style.backgroundColor = "#ff9999";
		fn.style.borderColor = "#cc0033";
		validated = validated-1;
	}
	
	//alert("end is "+validated);
	// Number of variable references to fields
	if (validated == "6"){
		return true;
	}
	else{
		return false;
	}	
}