使用不同的JS函数进行验证

Question

我正在做一项工作。我需要使用Javascript， 而不是jQuery 来验证表单，然后使用AJAX将该表单提交到PHP文件。

我已经确定了我想要使用的JS功能（必填字段，电话，电子邮件格式），但不确定激活这些功能的最佳方法。

此外，我希望在字段附近填充错误消息，而不是弹出窗口。

目前它不在JSfiddle。我得到了一个禁止的403错误。

表格：

<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>

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;
}

感谢您的帮助！