Question

我正在制作一份联系表格，其中包括姓名，电子邮件和可以提交的信息。如果三个字段中的任何一个为空，则显示我正在工作的错误消息。单词＆＃34;错误＆＃34;出现在所有三个字段框中。我的问题是我正在尝试添加一条隐藏的错误消息，只有在出现错误时才显示，这将说明＆＃34;请在提交之前填写所有字段＆＃34;

我是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>标记，则会为您编写大量JavaScript。你所要做的就是这样：

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

它并不像你所尝试的那样华丽，但它很简单而且很有效。

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

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

2 个答案: