動態復選框的JavaScript驗證

Question

我在使我的驗證生效時遇到了一些問題。 我基本上需要確保所有文本框都已填充，並且至少選中了1個復選框。 文本字段很容易，但是復選框的填充方式卻很困難。 這是我的表單的摘要，此后還有很多。 我可以在復選框上更改事件還是將其刪除？

<form id="orderForm" action="#" method="get" onsubmit="return cdSubmitValidate();">
    <section id="selectCD">
        <h2>Select CDs</h2>
<div class='item'>
        <span class='CDTitle'>A Biography of the Rev. Absalom Dawe</span>
        <span class='CDYear'>2001</span>
        <span class='catDesc'>Comedy</span>
        <span class='CDPrice'>11.70</span>
        <span class='chosen'><input type='checkbox' name='CD[]' value='651' title='11.70' onclick='checkBoxCheck(this)'/></span>
    </div>
<div class='item'>
        <span class='CDTitle'>A Bronx Tale Soundtrack</span>
        <span class='CDYear'>2000</span>
        <span class='catDesc'>Death Metal</span>
        <span class='CDPrice'>7.80</span>
        <span class='chosen'><input type='checkbox' name='CD[]' value='652' title='7.80' onclick='checkBoxCheck(this)'/></span>
    </div>
<div class='item'>
        <span class='CDTitle'>A Little Deeper</span>
        <span class='CDYear'>2000</span>
        <span class='catDesc'>Rap/R&B</span>
        <span class='CDPrice'>8.30</span>
        <span class='chosen'><input type='checkbox' name='CD[]' value='653' title='8.30' onclick='checkBoxCheck(this)'/></span>
    </div>

        <div id="retCustDetails" class="custDetails">
            Forename <input type="text" name="forename" id="forename" />
            Surname <input type="text" name="surname" id="surname" />
        </div>
<p><input type="submit" name="submit" value="Order now!" id="sub1"/></p>

到目前為止，這一嘗試都無濟於事。

function cdSubmitValidate(){
  var forename = document.getElementById('forename').value;
  var surname = document.getElementById('surname').value;
  var checkboxTicked;

  function checkBoxCheck(elemName){

    if (elemName.checked == true) {
    checkboxTicked = true;
    }else if (elemName.checked == false) {
    checkboxTicked = false;
    }
  };

  if (!forename || !surname || checkboxTicked) {
    alert("Input criteria not met. Please Review and try again");
    return false;
  }

};

Answer 1

我認為這將解決此問題，首先將checkBoxCheck()函數從cdSubmitValidate()函數中cdSubmitValidate() ，還將checkboxTicked cdSubmitValidate() 。 我認為問題是在控制台記錄的功能內部調用了一個函數：

未捕獲ReferenceError：未定義checkBoxCheck。

同樣在您的if語句中，條件是

if (!forename || !surname || checkboxTicked)

我將其更改為if (!forename || !surname || !checkboxTicked)

CodePen

 var checkboxTicked; function cdSubmitValidate() { var forename = document.getElementById('forename').value, surname = document.getElementById('surname').value; if (!forename || !surname || !checkboxTicked) { alert("Input criteria not met. Please Review and try again"); return false; } }; function checkBoxCheck(elemName) { if (elemName.checked == true) { checkboxTicked = true; } else if (elemName.checked == false) { checkboxTicked = false; } }; 

 <form id="orderForm" action="#" method="get" onsubmit="return cdSubmitValidate();"> <section id="selectCD"> <h2>Select CDs</h2> <div class='item'> <span class='CDTitle'>A Biography of the Rev. Absalom Dawe</span> <span class='CDYear'>2001</span> <span class='catDesc'>Comedy</span> <span class='CDPrice'>11.70</span> <span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='651' title='11.70' onclick='checkBoxCheck(this)'/></span> </div> <div class='item'> <span class='CDTitle'>A Bronx Tale Soundtrack</span> <span class='CDYear'>2000</span> <span class='catDesc'>Death Metal</span> <span class='CDPrice'>7.80</span> <span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='652' title='7.80' onclick='checkBoxCheck(this)'/></span> </div> <div class='item'> <span class='CDTitle'>A Little Deeper</span> <span class='CDYear'>2000</span> <span class='catDesc'>Rap/R&B</span> <span class='CDPrice'>8.30</span> <span class='chosen'><input type='checkbox' class="chkbx" name='CD[]' value='653' title='8.30' onclick='checkBoxCheck(this)'/></span> </div> <div id="retCustDetails" class="custDetails"> Forename <input type="text" name="forename" id="forename" /> Surname <input type="text" name="surname" id="surname" /> </div> <p><input type="submit" name="submit" value="Order now!" id="sub1"/></p>