如何在使用javascript檢查復選框后驗證“textarea”

Question

我做了一個幾乎沒有問題的表格。 每個問題都有復選框或單選按鈕，具體取決於問題的類型（可以有多少答案）。

然后我開始制作驗證功能，以便能夠檢查用戶是否完成了整個表單。

我不確定如何制作一個驗證函數，只有在選擇某個答案時才會觸發（選中某個復選框，會觸發函數檢查textarea並檢查其內容）。

我到目前為止的代碼可以在這里找到。

該代碼也可在下面找到：

 // main function for checking the validation of answer function Validation() { if(!ValidateForm()) { document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question"; return false; } else { document.getElementById("errorBox").innerHTML = ""; return true } } // will check the checkbox to see if checked, // the "console.log" is there just because of previous problems, don't mind it function ValidateForm() { var k = document.getElementsByName('Knowledge'); for (var l = 0; l<k.length; l++) { if (k[l].checked) { console.log(k[l]) return true; } } } // this was supposed to be the code to do the following: // if the checkbox is checked, it would check for textarea // if the textarea is there, check if it has any content // if not, return false ---> sends message from the main function var k = document.getElementsByName('Knowledge'); for(var i = 0; i<k.length; i++) { if (k[6].checked) { } } 

 <form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()"> <div class="row" style="margin-top: 20px;"> <div class="col-sm-12"> <div class="form-group"> <p> <b>3. This is a question, Lorem ipsum dolor sit amet?</b> </p> <p style="margin-left: 16px;"> (please choose one or more answers to continue) </p> <div style="margin-left: 35px;"> <input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" > <label for="Knowledge1" style="font-weight:normal">answer 1<br> <input type="checkbox" id="Knowledge2" name="Knowledge" value="music" > <label for="Knowledge2" style="font-weight:normal">answer 2<br> <input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" > <label for="Knowledge3" style="font-weight:normal">answer 3</label><br> <input type="checkbox" id="Knowledge4" name="Knowledge" value="society" > <label for="Knowledge4" style="font-weight:normal">answer 4</label><br> <input type="checkbox" id="Knowledge5" name="Knowledge" value="other" > <label for="Knowledge5" style="font-weight:normal">answer 5 + explain <input type="text" placeholder=" . . ." border=""/></label><br> </div> </div> </div> </div> <div class="row" style="margin-top: 50px"> <div class="col-sm-3 col-sm-offset-3"> <div class="form-group"> <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button> </div> </div> </div> <div id="errorBox" style="margin-bottom:50px; color: red"></div> </form> 

Answer 1

如果要保持通用，請將數據屬性添加到需要其他文本的復選框，並使您的驗證檢查該數據屬性：

<input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text">
<input id="Knowledge5text" type="text" placeholder="..." border=""/>

。

if (checkboxElement.dataset.explain) {
  console.log('answer requires an explanation');
  var textFieldElement = document.getElementById(k[i].dataset.explain);
  if (!textFieldElement .value) {
    console.log('no answer found:', textFieldElement .value);
    return false;
  }
}

這是完整的例子。 旁注：除了循環變量之外，避免使用單字符變量名稱，這使得理解代碼變得更加困難

 // main function for checking the validation of answer function Validation() { if(!ValidateForm()) { document.getElementById("errorBox").innerHTML = "Please check that you correctly answered the question"; return false; } else { document.getElementById("errorBox").innerHTML = ""; return true } } // will check the checkbox to see if checked, // the "console.log" is there just because of previous problems, don't mind it function ValidateForm() { var k = document.getElementsByName('Knowledge'); for (var i = 0; i < k.length; i++) { if (k[i].checked) { if (k[i].dataset.explain) { console.log('answer requires an explanation'); var textField = document.getElementById(k[i].dataset.explain); if (!textField.value) { console.log('no answer found:', textField.value); return false; } } return true; } } } 

 <form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()"> <div class="row" style="margin-top: 20px;"> <div class="col-sm-12"> <div class="form-group"> <p> <b>3. This is a question, Lorem ipsum dolor sit amet?</b> </p> <p style="margin-left: 16px;"> (please choose one or more answers to continue) </p> <div style="margin-left: 35px;"> <input type="checkbox" id="Knowledge1" name="Knowledge" value="physical" > <label for="Knowledge1" style="font-weight:normal">answer 1<br> <input type="checkbox" id="Knowledge2" name="Knowledge" value="music" > <label for="Knowledge2" style="font-weight:normal">answer 2<br> <input type="checkbox" id="Knowledge3" name="Knowledge" value="nature" > <label for="Knowledge3" style="font-weight:normal">answer 3</label><br> <input type="checkbox" id="Knowledge4" name="Knowledge" value="society" > <label for="Knowledge4" style="font-weight:normal">answer 4</label><br> <input type="checkbox" id="Knowledge5" name="Knowledge" value="other" data-explain="Knowledge5text"> <label for="Knowledge5" style="font-weight:normal">answer 5 + explain <input id="Knowledge5text" type="text" placeholder=" . . ." border=""/></label><br> </div> </div> </div> </div> <div class="row" style="margin-top: 50px"> <div class="col-sm-3 col-sm-offset-3"> <div class="form-group"> <button type="submit" id="Submit" name="Submit" class="btn btn-default">! ANSWER !</button> </div> </div> </div> <div id="errorBox" style="margin-bottom:50px; color: red"></div> </form>