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

问题描述：

我试图做一个窗体，其中，当用户填写所有字段时，输出将导致所有输入数据的编译结果。表单连接到一个PHP文件，它运行得很好，但是当我尝试添加验证提交行为奇怪。基本上我的“验证”是由多个if语句与其他人组成。标题和内容验证是完美的工作顺序，但是当涉及到类型时，无论如何都要提交表单。无法弄清楚这个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>

您可能必须在您的帖子正文中澄清您的问题，并添加一些您迄今尝试过的内容以获得帮助。你可以随时更新你的问题。欢迎来到堆栈溢出，推荐阅读：http://stackoverflow.com/help/how-to-ask –

感谢您的建议，很高兴终于加入这里。 – motoko96

答

你应该只提交如果所有的值都是有效的形式，让使用标志为如下。此外，使用if...else构造来处理无效的&字段的有效情况将更加容易。

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

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

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

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

相关推荐