how can i validate the checkbox?

Question

<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
  <div class="form-group row" style="margin-top:10px;height:50px;">
    <div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
      <label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
											<span>Hepatitis A vaccine</span></label>
    </div>
    <div class="form-group col-md-4">
      <!-- Date input -->
      <input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
    </div>

  </div>
  <div class="row" style="padding:15px;">
    <div class="col-md-3 col-md-offset-1">
      <div class="form-group">
        <h3 style="color:orange;">Clinic Name</h3><br>
        <input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
        <label for="clinic_name"></label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <h3 style="color:orange;">Name of the Health practitioner</h3><br>
        <input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
        <label for="hp_name"></label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <h3 style="color:orange;">Lot no. of Vaccine</h3><br>
        <input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
        <label for="lotno"></label>
      </div>
    </div>
    <div class="row col-md-offset-1">
      <div class="col-md-6 text-right">
        <input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
      </div>
    </div>
  </div>
</form>

i have added my html code also..

$('.save').on('click', function() {
  var chk = $(this).parent().parent().parent().parent().parent().find('input    [name="ch"]').attr('class');
if ($("." + chk).attr('checked', false)) {
    alert("please check the checkbox");
  } else {
    alert("you have checked the checkbox");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

i have tried with this code and getting the alert "please check the checkbox" for both conditions if and else. i just want to validate the checkbox whether it is checked or not .. if checked means it should display the relevant message if not checked also should display the message.

Answer 1

There are two things i am noticing:

1. Instead use .closest() against .parent() multiple times.
2. Do not set the attribute in the if condition, instead of .attr() use .prop().

---

You can change to this

var chk = $(this).closest('form').find('input[name="ch"]');// use form if you have one.
if (!$(chk).prop('checked')) {

$('.save').on('click', function() {
  var chk = $(this).closest('form').find('input[name="ch"]');
  if (!$(chk).prop('checked')) {
    alert("please check the checkbox");
  } else {
    alert("you have checked the checkbox");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
  <div class="form-group row" style="margin-top:10px;height:50px;">
    <div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
      <label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
											<span>Hepatitis A vaccine</span></label>
    </div>
    <div class="form-group col-md-4">
      <!-- Date input -->
      <input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
    </div>

  </div>
  <div class="row" style="padding:15px;">
    <div class="col-md-3 col-md-offset-1">
      <div class="form-group">
        <h3 style="color:orange;">Clinic Name</h3><br>
        <input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
        <label for="clinic_name"></label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <h3 style="color:orange;">Name of the Health practitioner</h3><br>
        <input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
        <label for="hp_name"></label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <h3 style="color:orange;">Lot no. of Vaccine</h3><br>
        <input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
        <label for="lotno"></label>
      </div>
    </div>
    <div class="row col-md-offset-1">
      <div class="col-md-6 text-right">
        <input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
      </div>
    </div>
  </div>
</form>