Question

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

有什么建议吗？ 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>

Answer 1

只有在所有值都有效的情况下才应提交表单，因此请使用下面给出的标志。此外，使用if...else构造来处理无效＆amp;更容易一个字段的有效案例。

在你的逻辑中，问题与前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

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

1 个答案: