Use different JS functions for verification on submit

Question

I've got an assignment I'm working on. I'm required to use Javascript, not jQuery to validate a form and then submit that form to a PHP file using AJAX.

I've identified the JS functions (required fields, phone, email format) I want to use but not sure of the best method for activating those functions.

In addition I want to have the error message populate near the field rather than as a pop up.

It's not working in JSfiddle right now. I'm getting a forbidden 403 error.

The form:

<form id="contact-form" name="contact" onsubmit="return validateFormOnSubmit(this)" action="form.php" method="post">
        <h2>Contact Me</h2>
        <div>
            <label>Name</label>
            <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
        </div>

        <div>
            <label>Email</label>
            <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />
        </div>

        <div>
            <label>Phone</label>
            <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus />
        </div>

        <div>
            <input type="submit" name="submit" id="submit" tabindex="5" value="Send" />
        </div>

    </form>

The JS:

function validateFormOnSubmit(contact) {
var reason = "";

  reason += validateEmail(contact.email);
  reason += validatePhone(contact.phone);
  reason += validateEmpty(contact.name);

  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }

  return true;
}

// validate required fields
function validateEmpty(name) {
    var error = "";

    if (name.value.length == 0) {
        name.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        name.style.background = 'White';
    }
    return error;   
}


// validate email as required field and format
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(email) {
    var error="";
    var temail = trim(email.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (email.value == "") {
        email.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(temail)) {              //test email for illegal characters
        email.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        email.style.background = 'White';
    }
    return error;
}

// validate phone for required and format
function validatePhone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');     

   if (phone.value == "") {
        error = "You didn't enter a phone number.\n";
        phone.style.background = 'Yellow';
    } else if (isNaN(parseInt(stripped))) {
        error = "The phone number contains illegal characters.\n";
        phone.style.background = 'Yellow';
    } else if (!(stripped.length == 10)) {
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
        phone.style.background = 'Yellow';
    } 
    return error;
}

Thanks for any help!