javascript - 无法制作隐藏/可见的错误消息

Question

我正在制作一个联系表，其中包括姓名、电子邮件和一条可以提交的消息。如果这三个字段中的任何一个为空，则会显示我正在处理的错误消息。 “错误”一词出现在所有三个字段框中。我的问题是我正在尝试添加一条错误消息，该消息将被隐藏并且仅在发生错误时出现，这将显示“请在提交前填写所有字段”

我不熟悉 ColdFusion 以及将 HTML 与 JavaScript 混合使用。所以我想知道是否有人可以给我一些关于我做错了什么的提示。我尝试过以多种方式操作它，并尝试在我的 CSS 中为此消息添加一个 div。但无济于事，消息总是出现。它不会在需要时隐藏起来。

我真的很感激任何人可以提供的任何信息或帮助，我很困惑并且已经搜索了整个网络以寻找此信息。

这是我的代码:

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 = "Error";
            var emptyFields = true;
        }
    }
    if (!emptyFields) {
        myForm.submit();
    } else {
        if (document.getElementById("name == null || email == null || message == null")
            document.getElementById("errormessage").style.visibility = "visible";
        } else {
            document.getElementById("errormessage").style.visibility = "hidden";
        }
    }

    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";
        }
    }

这是我的错误消息的 CSS:

#errormessage {
    font-style: italic;
    text-indent: 10px;
    border: dotted;
    border-width: 1px;
}

Answer 1

使用 ColdFusion 进行表单验证有一种更简单的方法。如果你使用 <cfform>和 <cfinput> tags 那么很多 JavaScript 都是为你写的。您所要做的就是这样:

<cfform action="whereever">
<cfinput type="text" name="fred" required="yes" message="fred is required">
<input type="submit">
</cfform>

它不像您正在尝试的那样花哨，但它简单且有效。