I am trying to use jQuery (jQuery validation plugin) to validate some inputs and make sure input fields are not empty. I have some checkbox inputs alongside select and other input elements. All the other validations are working and append some html to request the user to enter the required inputs.
The validation for checkboxes isn't working however -- no warning is printed on the webpage if no checkbox is selected. How can I make checkboxes validation work in the code below please?
$("#the-form").validate({
rules: {
'food_item[]': {
required: true,
minlength: 1,
},
select_event: {
required: true,
},
}
})<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form id="the-form">
<div class="dropdown-menu w-100 p-5" aria-labelledby="dropdownMenuButton" id="the_things">
<div class="d-flex justify-content-between
border-bottom py-5">
<label for="one_thing">One thing</label>
<input name="food_item[]" type="checkbox" class="dropdown-item w-25" id="one_thing" value="Item One">
</div>
<div class="d-flex justify-content-between
border-bottom py-5">
<label for="second_thing">Second thing</label>
<input name="food_item[]" type="checkbox" class="dropdown-item w-25" id="second_thing" value="Item two">
</div>
<div class="d-flex justify-content-between
border-bottom py-5">
<label for="third_thing">Third thing</label>
<input name="food_item[]" type="checkbox" class="dropdown-item w-25" id="third_thing" value="Item three">
</div>
</div>
</form>
<button class="btn btn-outline-danger bg-light-danger d-block
font-weight-bolder my-8"
id="">Continue</button>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src= "https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src= "https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>