2

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

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

2 回答 2

0

使用 ColdFusion 进行表单验证有一种更简单的方法。如果您使用<cfform>and<cfinput>标记，那么会为您编写大量 JavaScript。你所要做的就是这样的：

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

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

于 2013-05-22T12:03:28.273 回答
-1

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

<!--
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>
于 2013-05-22T09:08:42.317 回答