javascript驗證不起作用

Question

我創建了波紋管表單驗證腳本，但沒有工作，我每次都在「沒有選擇項目」。你能幫我解決這個問題嗎？

我的代碼：

<script type="text/javascript"> 
function ValidateSchool(form){ 
    var cat_school = document.getElementsByName('school[]');  

    for (i = 0; i < cat_school.length; i++){ 
     if (cat_school[i].checked == true){ 
      return true; 
     }else{ 
      alert('No item selected'); 
      return false; 
     } 
    } 
} 
</script> 

<form name="frm" method="post" action="#" onsubmit="return ValidateSchool(this)"> 
    <div class="TopAlphaWrapper"> 
    <div id="topMainAlpha"> 
     <div id="TopAlphaOneLeft"> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Admiralty Primary School" style="display: block;"> 
      <label id="lbl_type0" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.442917,103.799744" type="checkbox"> 
      Admiralty Primary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Admiralty Secondary School" style="display: block;"> 
      <label id="lbl_type1" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.446367,103.801608" type="checkbox"> 
      Admiralty Secondary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Advent Learning" style="display: block;"> 
      <label id="lbl_type2" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.324952,103.851188" type="checkbox"> 
      Advent Learning</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="AEC Business School" style="display: block;"> 
      <label id="lbl_type3" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.282717,103.818904" type="checkbox"> 
      AEC Business School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ahmad Ibrahim Primary School " style="display: block;"> 
      <label id="lbl_type4" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.43367,103.832723" type="checkbox"> 
      Ahmad Ibrahim Primary School </label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ahmad Ibrahim Secondary School" style="display: block;"> 
      <label id="lbl_type5" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.436482,103.829649" type="checkbox"> 
      Ahmad Ibrahim Secondary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ai Tong School" style="display: block;"> 
      <label id="lbl_type6" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.360415,103.832615" type="checkbox"> 
      Ai Tong School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Al-Mubarakah Tuition Centre" style="display: block;"> 
      <label id="lbl_type7" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.352244,103.954274" type="checkbox"> 
      Al-Mubarakah Tuition Centre</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Alps Academia" style="display: block;"> 
      <label id="lbl_type8" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.33079,103.9485" type="checkbox"> 
      Alps Academia</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="American College" style="display: block;"> 
      <label id="lbl_type9" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.280777,103.805617" type="checkbox"> 
      American College</label> 
     </div> 
     </div> 
    </div> 
    </div> 

    <input type="submit" name="submit" value="Submit" /> 
</form> 

任何意見或建議？謝謝。

Answer 1

您的驗證邏輯似乎是有缺陷的，從我能理解你想檢查至少一個項目是否被選中

function ValidateSchool(form) { 
    var cat_school = document.getElementsByName('school[]'); 

    var valid = false; 
    for (i = 0; i < cat_school.length; i++) { 
     if (cat_school[i].checked == true) { 
      valid = true; 
      break; 
     } 
    } 

    if (!valid) { 
     alert('No item selected'); 
    } 

    return valid; 
} 

的問題是你的邏輯是，如果未選中第一個複選框，你是顯示警報並返回false，而不是通過列表的其餘循環看到任何其他項目是否被選中

Answer 2

試試這個： -

<script type="text/javascript"> 
function ValidateSchool(form) { 
    var cat_school = document.getElementsByName('school[]'); 

    var valid = false; 
    for (i = 0; i < cat_school.length; i++) { 
     if (cat_school[i].checked == true) { 
      valid = true; 
      break; 
     } 
    } 

    if (!valid) { 
     alert('No item selected'); 
    } 

    return valid; 
} 
</script> 

<form name="frm" method="post" action="#" onsubmit="return ValidateSchool(this)"> 
    <div class="TopAlphaWrapper"> 
    <div id="topMainAlpha"> 
     <div id="TopAlphaOneLeft"> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Admiralty Primary School" style="display: block;"> 
      <label id="lbl_type0" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.442917,103.799744" type="checkbox"> 
      Admiralty Primary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Admiralty Secondary School" style="display: block;"> 
      <label id="lbl_type1" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.446367,103.801608" type="checkbox"> 
      Admiralty Secondary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Advent Learning" style="display: block;"> 
      <label id="lbl_type2" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.324952,103.851188" type="checkbox"> 
      Advent Learning</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="AEC Business School" style="display: block;"> 
      <label id="lbl_type3" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.282717,103.818904" type="checkbox"> 
      AEC Business School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ahmad Ibrahim Primary School " style="display: block;"> 
      <label id="lbl_type4" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.43367,103.832723" type="checkbox"> 
      Ahmad Ibrahim Primary School </label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ahmad Ibrahim Secondary School" style="display: block;"> 
      <label id="lbl_type5" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.436482,103.829649" type="checkbox"> 
      Ahmad Ibrahim Secondary School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Ai Tong School" style="display: block;"> 
      <label id="lbl_type6" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.360415,103.832615" type="checkbox"> 
      Ai Tong School</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Al-Mubarakah Tuition Centre" style="display: block;"> 
      <label id="lbl_type7" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.352244,103.954274" type="checkbox"> 
      Al-Mubarakah Tuition Centre</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="Alps Academia" style="display: block;"> 
      <label id="lbl_type8" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.33079,103.9485" type="checkbox"> 
      Alps Academia</label> 
     </div> 
     <div class="email_alert_checkbx_list filter-div ln-a" data-filter="American College" style="display: block;"> 
      <label id="lbl_type9" class="label_check c_off" name="school" style="width:230px !important;"> 
      <input name="school[]" class="chkBX" value="1.280777,103.805617" type="checkbox"> 
      American College</label> 
     </div> 
     </div> 
    </div> 
    </div> 

    <input type="submit" name="submit" value="Submit" /> 
</form> 

希望它的工作:)

Answer 3

在你只return語句得到多數民衆贊成只是問題執行復選框的第一個值碼

試試這個fiddle

function ValidateSchool(form){ 
var cat_school = document.getElementsByName('school[]'); 
var j=0; 

for (i = 0; i < cat_school.length; i++){ 

    if (cat_school[i].checked){ 
     j++; 
    } 
} 
if(j>0){ 
    alert("item selected"); 
    return true; 
} 
else{ 
    alert("select atleast one value"); 
    return false; 
} 

}