javascript - Java Script と印刷による検証

Question

HTML のフォームがあり、フィールドを空白のままにすると、Javascript がフィールド エラー内に出力されます。フォームを検証し、フォームのフィールド内ではなく空白のままにした場合、フォームの上にエラーを出力するコードを教えてください。

私のフォーム:

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

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

HTML5 以降、フォーム検証 API ( http://www.w3schools.com/js/js_form_validation.asp )があります。

ここでは、非常に優れた「チュートリアル」を見つけることができます: http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

Answer 2

エラーが #errormessage div に出力されることを希望していることが理解できましたか? もしそうなら、あなたは単に次のようなことをすることができます:

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