Manan
Manan

Reputation: 1195

javascript validation is not working

I have created bellow form validation script but not working i am getting every time "No item selected". What is wrong can you please help me to fix this issue.

My Code:

<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>

Any ideas or suggestions? Thanks.

Upvotes: 2

Views: 93

Answers (3)

Vinod Louis
Vinod Louis

Reputation: 4876

In your code for the first value of checkBox only the return statement gets executed thats only the problem

try this 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;
}

}

Upvotes: 0

Gautam Tak
Gautam Tak

Reputation: 129

Try this:-

<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>

Hope it work :)

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Your validation logic seems to flawed, from what I can understand you want to check whether at least one item is checked

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;
}

The problem is your logic is, if the first checkbox is not checked you are showing the alert and returns false instead of looping through rest of the list to see whether any other item is checked

Upvotes: 4

Related Questions