无法弄清楚这个 if 语句有什么问题？答案

【问题标题】：Can't figure out what's wrong with this if statement?无法弄清楚这个 if 语句有什么问题？
【发布时间】：2015-05-19 02:57:10
【问题描述】：

我正在尝试制作一个表单，当用户填写所有字段时，输出会汇总他们输入的所有数据。该表单连接到一个 php 文件，它运行得很好，但是当我尝试添加验证时，提交的行为很奇怪。基本上我的“验证”由多个 if 语句和一个 else 组成。标题和内容验证处于完美的工作状态，但是当涉及到类型时，它仍然提交表单。

有什么建议吗？
HTML 代码：

<body>
    <form id="documentationForm" action="testingPHP2.php" method="post">
        <figcaption>
            <p><strong>Instructions:</strong>
            </p>
            <p><i>Fill out the information as needed below. Place each step on a new line. When you are finished,<br>submit the document and download the file.</p></i>
        </figcaption>

        <strong>Title:</strong>
        <input id="docTitle" type="text" name="docTitle"><span id="errorTitle"></span> 
        <br>
        <strong>Type:</strong>
        <select id="docType" onchange="adaptiveLabel()" name="docType">
            <br>
            <option value="" selected>Select Document Type</option>
            <option value="Procedure">Procedure</option>
            <option value="Instruction">Instruction</option>
            <option value="Form">Form</option>
        </select><span id="errorType"></span>
        <br>
        <script>
            function adaptiveLabel() {
                var chosenType = document.getElementById("docType");
                var chosenTypeVal = chosenType.value;
                var x = document.getElementById("contentLabel");
                if (chosenTypeVal == "Procedure") {
                    x.innerHTML = "Procedural Steps:";
                }
                if (chosenTypeVal == "Instruction") {
                    x.innerHTML = "Steps:"
                }
                if (chosenTypeVal == "Form") {
                    x.innerHTML = "Form Parts:";
                }
                if (chosenTypeVal == " ") {
                    x.innerHTML = " ";
                }
            }

            function submitInputs() {
                var errorTitletext = document.getElementById("docTitle");
                var errorTitleLable = document.getElementById("errorTitle");
                var errorContenttext = document.getElementById("docInput");
                var errorContentLabel = document.getElementById("errorContent");
                var errorTypetext = document.getElementById("docType");
                var errorTypetextLable = document.getElementById("errorType");

                if (errorTypetext.value === "") {
                    alert("You must select a type");
                    errorTypetextLable.innerHTML = "*Please select a type";
                    errorTypetextLable.style.color = "red";
                }
                if (errorTypetext.value === "Procedure" || errorTypetext.value === "Form" || errorTypetext.value === "Instruction") {
                    errorTypetextLable.innerHTML = "";
                    errorTypetextLable.style.color = "";
                }
                if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
                    alert("You must create a title");
                    errorTitleLable.innerHTML = "*Please create a title";
                    errorTitleLable.style.color = "red";
                }
                if (errorTitletext.value.length > 0) {
                    errorTitleLable.innerHTML = "";
                    errorTitleLable.style.color = "";
                }
                if (errorContenttext.value.length === 0) {
                    alert("You must enter content");
                    errorContentLabel.innerHTML = "*Please enter content";
                    errorContentLabel.style.color = "red";
                }
                if (errorContenttext.value.length > 0) {
                    errorContentLabel.innerHTML = "";
                    errorContentLabel.style.color = "";
                } else {
                    document.getElementById("documentationForm").submit();
                }
            }
        </script>
        <strong><span id="contentLabel"></span><span id="errorContent"></span></strong>
        <br>
        <textarea style="width: 500px; height: 250px;" id="docInput" name="docInput"></textarea>
        <br>
        <input type="button" onclick="submitInputs()" value="Create Document">
        <input type="submit" value="Default Submit">
    </form>
</body>

【问题讨论】：

您可能需要在帖子正文中澄清您的问题，并添加一些您迄今为止尝试过的事情的示例以获得任何帮助。您可以随时更新您的问题。欢迎来到栈溢出，推荐阅读：stackoverflow.com/help/how-to-ask
感谢您的建议，很高兴终于加入了这里。

标签： javascript php html forms if-statement

【解决方案1】：

只有当所有值都有效时，您才应该提交表单，因此请使用下面给出的标志。此外，使用if...else 构造来处理字段的无效和有效情况也会更容易。

在您的逻辑中，问题与前 2 个字段的有效状态无关，如果内容有效，则调用表单的提交。

function submitInputs() {
    var errorTitletext = document.getElementById("docTitle");
    var errorTitleLable = document.getElementById("errorTitle");
    var errorContenttext = document.getElementById("docInput");
    var errorContentLabel = document.getElementById("errorContent");
    var errorTypetext = document.getElementById("docType");
    var errorTypetextLable = document.getElementById("errorType");

    var valid = true;
    if (errorTypetext.value === "") {
        alert("You must select a type");
        errorTypetextLable.innerHTML = "*Please select a type";
        errorTypetextLable.style.color = "red";
        valid = false;
    } else {
        errorTypetextLable.innerHTML = "";
        errorTypetextLable.style.color = "";
    }
    if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
        alert("You must create a title");
        errorTitleLable.innerHTML = "*Please create a title";
        errorTitleLable.style.color = "red";
        valid = false;
    } else {
        errorTitleLable.innerHTML = "";
        errorTitleLable.style.color = "";
    }
    if (errorContenttext.value.length === 0) {
        alert("You must enter content");
        errorContentLabel.innerHTML = "*Please enter content";
        errorContentLabel.style.color = "red";
        valid = false;
    } else {
        errorContentLabel.innerHTML = "";
        errorContentLabel.style.color = "";
    }
    if (valid) {
        document.getElementById("documentationForm").submit();
    }
}

演示：Fiddle

另外也不需要有默认的提交按钮，你可以只有一个按钮

<form id="documentationForm" action="testingPHP2.php" method="post" onsubmit="return submitInputs();">
    .....
    <input type="submit" value="Create Document" />
</form>

然后

function submitInputs() {
    var errorTitletext = document.getElementById("docTitle");
    var errorTitleLable = document.getElementById("errorTitle");
    var errorContenttext = document.getElementById("docInput");
    var errorContentLabel = document.getElementById("errorContent");
    var errorTypetext = document.getElementById("docType");
    var errorTypetextLable = document.getElementById("errorType");

    var valid = true;
    if (errorTypetext.value === "") {
        alert("You must select a type");
        errorTypetextLable.innerHTML = "*Please select a type";
        errorTypetextLable.style.color = "red";
        valid = false;
    } else {
        errorTypetextLable.innerHTML = "";
        errorTypetextLable.style.color = "";
    }
    if (errorTitletext.value.length === 0 || errorTitletext.value === " ") {
        alert("You must create a title");
        errorTitleLable.innerHTML = "*Please create a title";
        errorTitleLable.style.color = "red";
        valid = false;
    } else {
        errorTitleLable.innerHTML = "";
        errorTitleLable.style.color = "";
    }
    if (errorContenttext.value.length === 0) {
        alert("You must enter content");
        errorContentLabel.innerHTML = "*Please enter content";
        errorContentLabel.style.color = "red";
        valid = false;
    } else {
        errorContentLabel.innerHTML = "";
        errorContentLabel.style.color = "";
    }

    return valid;
}

演示：Fiddle

【讨论】：

非常感谢！奇迹般有效。我会更多地练习这些类型的语句，以便更好地理解。