无法制作隐藏/可见的错误消息答案

【问题标题】：Having trouble making hidden/visible error message无法制作隐藏/可见的错误消息
【发布时间】：2013-05-17 02:24:09
【问题描述】：

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

我是 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;
}

【问题讨论】：

if(document.getElementById("name") == '' || document.getElementById("email") == '' || document.getElementById("message") == '')
你的 if() 条件没有左大括号，但有右大括号。首先，确保没有拼写错误
谢谢你，我现在会找到我的错误并修复它。很抱歉打扰了
好的，所以我修复了我的错误，现在当我打开页面时它是可见的，即使它不应该是，然后当我输入错误的信息时它会隐藏，它不应该。我需要将其声明为隐藏在我的 CSS 表中吗？
是的。最初应该是隐藏的

标签： javascript css html dom coldfusion

【解决方案1】：

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

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

它没有你尝试的那么花哨，但它很简单而且很有效。

【讨论】：

【解决方案2】：

请仔细阅读下面的代码，看看你做错了什么。

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body onload="checkContactForm();">

        <style type="text/css">
            #errormessage  {

                font-style: italic;

                text-indent: 10px;

                border: dotted;

                border-width: 1px;

            }
        </style>
        <script type="text/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 = "Error";
                    var emptyFields = true;
                }

            }

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

            else

            {
                if (emptyFields) {
                    document.getElementById("errormessage").innerHTML  = "Validation Error";
                    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";
            }

        }

        </script>



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

        <form action="STO1.html" method="POST" name="myForm">
            <input type="text" name="name" id="name"/>
            <input type="text" name="email" id="email"/>
            <input type="text" name="message" id="message"/>
            <input type="submit"/>
        </form>
    </body>
</html>

【讨论】：