0

我有一个 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";
    }
}
4

2 回答 2

0

如果我了解您希望将错误打印在#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(); }
}
于 2013-05-21T14:00:07.460 回答
0

由于 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/

于 2013-05-21T13:40:14.093 回答