Javascript表格验证

Question

我需要对字段进行Javascript验证。我需要知道如何为每个标签的每个跨度制作如何使其显示写入消息。

目前html代码为：

<form method="post" id="contactForm" onclick="return main();">
    <fieldset>
        <div class="subscribe">
            <label for="firstName">First name:</label>
                <input type="text" name="firstName" id="firstName"/>
                <span id="fnameMessage" class="infomessage">
                Your first name should contain at least 2 alpha characters.
            </span> 
        </div>
        <div class="subscribe">
            <label for="lastName">Last name:</label>
            <input type="text" name="lastName" id="lastName"/>
            <span id="lnameMessage" class="infomessage">
                Your last name should contain at least 2 alpha characters.
            </span>
        </div>
        <div class="subscribe">
            <label for="title">Title:</label>
            <select name="title" id="title">
                <option value="1"> Mr. </option>
                <option value="2"> Ms. </option>
                <option value="3"> Mrs. </option>
                <option value="4"> Miss. </option>
                <option value="5"> Master. </option>
            </select>
        </div>  
        <div class="subscribe">
            <label for="hNumber">Health Authority Number:</label>
            <input type="text" name="number" id="hNumber"/>
            <span id="hanMessage" class="infomessage">
                Your ZHA number should be in the form of 6 digit integer prefixed wit the letters ZHA.
            </span> 
        </div>
        <div class="subscribe">
            <label  for="email">Email address: </label>
            <input type="email" name="email" id="email"/>
            <span id="emailMessage" class="infomessage">
                Your email address should be as example: example@difexample.com. 
            </span> 
        </div>
        <div class="subscribe">
            <label for="phoneNumber">Telephone number:</label>
            <input type="text" name="phoneNumber" id="phoneNumber"/>
            <span id="phoneMessage" class="infomessage"> 
                Your phone number should contain 11 numeric characters.
            </span>
        </div>
        <div class="button">
            <input id="btn1" type="submit" value="Submit" /> 
        </div>
    </fieldsed>
</form> 

我已经完成的javascript代码：

function main() {
    document.getElementById("contactForm").onsubmit = validateAll,
    document.getElementById("firstName").onblur = validateName,
    document.getElementById("lastName").onblur = validateName,
    document.getElementById("phoneNumber").onblur = validatePhone;
}

function validateName() {
    var test1 = fieldEmpty(this);
    var test2 = fieldLength(this,2,50);
    var test3 = fieldCharacters(this, "A");
    var result = test1&&test2&&test3;
    return result;
}

function validatePhone() {
    var test1 = fieldEmpty(this);
    var test2 = fieldLength(this,11,11);
    var test3 = fieldCharacters(this,"N");
    var result = test1&&test2&&test3;
    return result;
}

function fieldEmpty(id) {
    var valid = true;
    if (id.value == "") {
        valid = false;
        alert("Field Empty");
    }
    return valid;
}

function fieldLength(id,min,max) {
    var valid = true;
    var lng = id.value.length;
    if (lng < min || lng > max) {
        valid = false;
        alert("Field Length");
    }
    return valid;
}

function fieldCharacters(id,character) {
    var letters = /[a-zA-Z]/;
    var numbers = /[0-9]/;
    var patternTest;
    var valid = true;

    if(character == "N") {
        patternTest = numbers;
    }
    else if(character == "A") {
        patternTest = letters;
    }
    valid = patternTest.test(id.value);
    if (!valid) {
        alert("Pattern Fail");
    }
    return valid;
}

function validateField() {
    var noErrors = true;
    // var input = document.getElementById(this);
    if(this.value.length<2) {
        noErrors = false;
        alert("You need to input more than 1 character in " + this.id);
    }
    if(noErrors==false) {
        var temp = document.getElementById(this.id + "firstnamemessage");
        temp.className = "infomessage";
    }
}

function validateAll() {
    return false;
}

window.onload = main();