無法弄清楚這個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>

來源

2015-05-19 motoko96

您可能必須在您的帖子正文中澄清您的問題，並添加一些您迄今嘗試過的內容以獲得幫助。你可以隨時更新你的問題。歡迎來到堆棧溢出，推薦閱讀：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

來源

2015-05-19 03:03:25

非常感謝！奇蹟般有效。我會更多地練習這些類型的陳述，以便更好地理解。 – motoko96

無法弄清楚這個if語句有什麼問題？

回答

相關問題