$(document).ready(function(){
  $('.mailForm').bind('submit', function(e){
    $('.mailForm #realname').attr('value', $('.mailForm #forename').attr('value') + ' ' + $('.mailForm #surname').attr('value'));
	$('.errorMessage').remove();
	$('#errorMessage').empty();
	var reqFields = checkRequiredFields($('.mailForm #required').attr('value'))
	if(reqFields.status){
	  e.preventDefault();
	  $('#errorMessage').append('<div id="reqMessage">Sorry, the following fields cannot be left blank<ul></ul></div>');
	  for(reqField in reqFields.fields){
	    $('#reqMessage ul').append('<li>' + reqFields.fields[reqField] + '</li>');
		}
	  }
	else{
	  $(':submit', this).attr('disabled', 'disabled').attr('value','Submitting...');
	  }
	});
  });
  
  
function checkRequiredFields(requiredFields){
  var reqFieldsArray = requiredFields.split(',');
  var errors = false;
  var problemFields = new Array();
  for(reqField in reqFieldsArray){
    if($('#' + reqFieldsArray[reqField]).attr('value') == ''){
	  $('#' + reqFieldsArray[reqField]).after('<div class="errorMessage">Sorry, this field cannot be left blank</div>');
	  problemFields.push(reqFieldsArray[reqField]);
	  errors = true;
	  }
	}
  return {status:errors,fields:problemFields};
  }