使用Java脚本进行验证和打印

Question

I have a form in HTML and that if the fields are left blank, the Javascript will print inside the fields error. Please can some one give me a piece of code that will validate the form and then will print Error on top of the form if its left blank and not inside the fields of the form?

My Form:

<form id="contact" onsubmit="checkContactForm(); return false;" onreset="resetForm();">
<p>Fill in the form below to send me a message!</p>    

<div id="errormessage"></div>

<p>
<label for="">  </label>
<input type="text" name="" id="" onfocus="" />

<p>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" onfocus="resetField(this);" />
</p>
<p>
  <label for="email">E-mail address:</label>
  <input type="text" name="email" id="email" onfocus="resetField(this);" />
</p>
<p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" rows="5" cols="25" onfocus="resetField(this);"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>

My Javascript:

var requiredFields = ["name", "email", "message"];

function checkContactForm() {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        if (!myForm[fieldName].value || myForm[fieldName].value == "Error") {
            myForm[fieldName].style.color = "#f66";
            myForm[fieldName].value = "";
            var emptyFields = true;
        }
    }

    if (!emptyFields) { myForm.submit(); }
}

function resetField(myField) {
    if (myField.value == "Error") {
        myField.style.color = "#000";
        myField.value = "";
    }
}

function resetForm(myForm) {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        myForm[fieldName].style.color = "#000";
    }
}

Answer 1

Since HTML5 there is a form-validation API ( http://www.w3schools.com/js/js_form_validation.asp )

Here you can find a pretty good "tutorial": http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

Answer 2

If I've understand you want the error will be printed in the #errormessage div, right? If so you can simply do something like this:

function addError(str){
    document.getElementById("errormessage").innnerHTML = document.getElementById("errormessage").innerHTML + str + "<br>";
}

function checkContactForm() {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        if (!myForm[fieldName].value || myForm[fieldName].value == "Error") {
            myForm[fieldName].style.color = "#f66";
            myForm[fieldName].value = "";
            var emptyFields = true;
            addError(fiedlName+" is empty!");
        }
    }

    if (!emptyFields) { myForm.submit(); }
}