-1

I am facing a problem with the validation of the group of my checkboxes.

my code looks like this:

<script>
  $('div.checkbox-group.required :checkbox:checked').length > 0
</script>
<figure class="fig">
  <label>
    <div class="order">19</div>
    <p>MDU Floor Layout<span class="asterisk">&#42;</span></p>
  </label>
  <br>
  <fieldset id="opfloorlayout" class="checkbox-group required" required>
    <div>
      <input type="checkbox" id="opbasement" name="mdu_floor_layout" value="Basement">
      <label class="checking" for="opbasement">Basement</label>
    </div>
    <div>
      <input type="checkbox" id="opcarpark" name="mdu_floor_layout" value="Underground car park">
      <label class="checking" for="opcarpark">Underground Car Park</label>
    </div>
    <div>
      <input type="checkbox" id="opintake" name="mdu_floor_layout" value="Intake cupboard">
      <label class="checking" for="opintake">Intake Cupboard</label>
    </div>
    <div>
      <input type="checkbox" id="opriser" name="mdu_floor_layout" value="Riser cupboards">
      <label class="checking" for="opriser">Riser Cupboards</label>
    </div>
    <div>
      <input type="checkbox" id="opfceiling" name="mdu_floor_layout" value="False Ceiling">
      <label class="checking" for="opfceiling">False Ceiling</label>
    </div>
    <div>
      <input type="checkbox" id="opnothing" name="mdu_floor_layout" value="No riser or intake cupboard">
      <label class="checking" for="opnothing">No Riser or Intake Cupboard</label>
    </div>
  </fieldset>
  <br>
</figure>

I tried mainly this solution, which suits best to me:

Using the HTML5 "required" attribute for a group of checkboxes?

but I don't know why the validation is not recognized by my browser?

What am I doing wrong here?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Geographos
  • 827
  • 2
  • 23
  • 57
  • You've misunderstood the (rather useless) accepted answer in that question - the line of code it provides only shows how to *detect* if an option has been chosen. You still need to implement the validation logic yourself. Other answers, such as [this](https://stackoverflow.com/a/37825072/519413) and [this](https://stackoverflow.com/a/49706929/519413) give a better examples of how to do that – Rory McCrossan Jun 17 '21 at 10:56

1 Answers1

-1

You are:

  • Testing how many checkboxes are checked before they exist (which is also before the user will have had a chance to check any of them).
  • You aren't doing anything with the result of that test.

Generally the logic for this sort of test would be:

When the user tries to submit the form make sure that at least one checkbox is checked and if none are, cancel the submission of the form and display a message telling the user what the problem is.

You skipped the parts in bold.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    There are quite a lot of steps there, and all of them are relatively simple. I'm not going to write you an introductory "how to do form validation with JS" tutorial, there are plenty out there already. You can also google the individual tasks listed there. – Quentin Jun 17 '21 at 11:01