window.onload = initialise;
function initialise()
{
  // Ensure we're working with a relatively standards compliant user agent
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;

  // Add an event handler for the form
  var objForm = document.getElementById('contactform');
  objForm.onsubmit= function(){return checkform(this);};
}

function checkform(objForm)
{
  // Test whether fields are valid
  var bFirst = validateRequired(document.getElementById('first').value);
  var bSecond = validateRequired(document.getElementById('last').value);
  var bEmail = validateRequired(document.getElementById('email').value);
  var bValidEmail = validateEmail(document.getElementById('email').value); 
  var bVraag = validateRequired(document.getElementById('vraag').value); 
      
  
  // If not valid, display errors
  if ( !bFirst   || !bSecond || !bEmail || !bValidEmail || !bVraag  )
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h1');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // The heading element will contain a link so that screen readers
    // can use it to place focus - the destination for the link is 
    // the first error contained in a list
    objAnchor.appendChild(document.createTextNode('Fouten in het contactformulier'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // Add each error found to the list of errors
    if (!bFirst)
    {
      strError = 'Gelieve een voornaam in te geven';
      objList.appendChild(addError(strError, '#first', objForm, strID));
      strID = '';
    }
    
    if (!bSecond)
    {
      strError = 'Gelieve een achternaam in te geven';
      objList.appendChild(addError(strError, '#last', objForm, strID));
      strID = '';
    }
    if (!bEmail)
    {
      strError = 'Gelieve een e-mailadres in te geven';
      objList.appendChild(addError(strError, '#email', objForm, strID));
      strID = '';
    }
    
    if (!bValidEmail)
    {
      strError = 'Gelieve een correct e-mailadres in te geven';
      objList.appendChild(addError(strError, '#email', objForm, strID));
      strID = '';
    }  
    if (!bVraag)
    {
      strError = 'Gelieve een vraag in te geven';
      objList.appendChild(addError(strError, '#vraag', objForm, strID));
      strID = '';
    }
    
    // Add the list to the error information
    objNew.appendChild(objList);
    // If there were existing errors, replace them with the new lot,
    // otherwise add the new errors to the start of the form
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // Place focus on the anchor in the heading to alert
    // screen readers that the submission is in error
    objAnchor.focus();
    // Do not submit the form
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}

// Function to validate a number
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
} 

// Function to validate required field
function validateRequired(strValue) {
     return ( ! (strValue == "" ) );  
}

// Function to validate email
function validateEmail(strValue) {
    var returnvalue = "";
    
    var emailFilter = /^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i ;

    if ( (strValue == "") || (!emailFilter.test(strValue)) )
    {
    	returnvalue = "notValid";
    }
    return (returnvalue == "" );
}



// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // If strID has a value, this is the first error in the list
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}

// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
  // Allow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // set focus to the form control
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}