我在验证HTML格式时发生错误

function validateFormOnSubmit(contact) {  
    reason = "";  
    reason += validateName(contact.name);  
    reason += validateEmail(contact.email);  
    reason += validatePhone(contact.phone);  
    reason += validatePet(contact.pet);  
    reason += validateNumber(contact.number);  
    reason += validateDisclaimer(contact.disclaimer);  
    if (reason.length > 0) {  
     return false;  
    } else {  
     return false;  
    }  
}  
// validate required fields  
function validateName(name) {  
    var error = "";  
    if (name.value.length == 0) {  
     name.style.background = 'Red';  
     document.getElementById('name-error').innerHTML = "The required field has not been filled in";  
     var error = "1";  
    } else {  
     name.style.background = 'White';  
     document.getElementById('name-error').innerHTML = '';  
    }  
    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 = /^[^@][email protected][^@.]+\.[^@]*\w\w$/;  
    var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;  
    if (email.value == "") {  
     email.style.background = 'Red';  
     document.getElementById('email-error').innerHTML = "Please enter an email address.";  
     var error = "2";  
    } else if (!emailFilter.test(temail)) { //test email for illegal characters  
     email.style.background = 'Red';  
     document.getElementById('email-error').innerHTML = "Please enter a valid email address.";  
     var error = "3";  
    } else if (email.value.match(illegalChars)) {  
     email.style.background = 'Red';  
     var error = "4";  
     document.getElementById('email-error').innerHTML = "Email contains invalid characters.";  
    } else {  
     email.style.background = 'White';  
     document.getElementById('email-error').innerHTML = '';  
    }  
    return error;  
}  
// validate phone for required and format  
function validatePhone(phone) {  
    var error = "";  
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');  
    if (phone.value == "") {  
     document.getElementById('phone-error').innerHTML = "Please enter a phone number";  
     phone.style.background = 'Red';  
     var error = '6';  
    } else if (isNaN(parseInt(stripped))) {  
     var error = "5";  
     document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";  
     phone.style.background = 'Red';  
    } else if (stripped.length < 10) {  
     var error = "6";  
     document.getElementById('phone-error').innerHTML = "The phone number is too short.";  
     phone.style.background = 'Red';  
    } else {  
     phone.style.background = 'White';  
     document.getElementById('phone-error').innerHTML = '';  
    }  
    return error;  
}  
function validatePet(pet) {  
    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {  
     document.getElementById('pet-error').innerHTML = "Pet required";  
     var error = "2";  
    } else {  
     document.getElementById('pet-error').innerHTML = '';  
    }  
    return error;  
}  
function validateNumber(number) {  
    var num = document.forms["contact"]["number"];  
    var y = num.value;  
    if (!isNaN(y)) {  
     //alert('va');  
     if (y < 0 || y > 50) {  
      //Wrong  
      number.style.background = 'Red';  
      document.getElementById("number-error").innerHTML = "Must be between 0 and 50.";  
      var error = "10";  
     } else {  
      //Correct  
      number.style.background = 'White';  
      document.getElementById("number-error").innerHTML = "";  
     }  
     return error;  
    } else {  
     document.getElementById("number-error").innerHTML = "Must be a number.";  
     var error = "3";  
    }  
    return error;  
}  
function validateDisclaimer(disclaimer) {  
    var error = "";  
    if (document.getElementById("disclaimer").checked === false) {  
     document.getElementById('disclaimer-error').innerHTML = "Required";  
     var error = "4";  
    } else {  
     document.getElementById('disclaimer-error').innerHTML = '';  
    }  
    return error;  
}

.error {  
    color: #990000;  
}  
input::-webkit-input-placeholder {  
color: white !important;  
}  
input:-moz-placeholder { /* Firefox 18- */  
color: white !important;  
}  
input::-moz-placeholder { /* Firefox 19+ */  
color: white !important;  
}  
input:-ms-input-placeholder {  
color: white !important;  
}

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post">  
    <div>  
     <label>First Name</label>  
     <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />  
     <div id="name-error" class="error"></div>  
    </div>  
    <div>  
     <label>Nickname</label>  
     <input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus />  
    </div>  
    <div>  
     <label>Email</label>  
     <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />  
     <div id="email-error" class="error"></div>  
    </div>  
    <div>  
     <label>Phone</label>  
     <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus />  
     <div id="phone-error" class="error"></div>  
    </div>  
    <div>  
     <label>I prefer</label>  
     <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs  
     <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats  
     <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither  
     <div id="pet-error" class="error"></div>  
    </div>  
    <div>  
     <label>My favorite number between 1 and 50</label>  
     <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus />  
     <div id="number-error" class="error"></div>  
    </div>  
    <div>  
     <label>Disclaimer</label>  
     <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true.  
     <div id="disclaimer-error" class="error"></div>  
    </div>  
    <div>  
     <button type="submit" name="submit" id="submit" tabindex="10">Send</button>  
    </div>  
</form>