I have a form that contains several questions. Some of these questions are checkbox inputs.
When a form question is generated, it follows the following structure:
- Contains the parent div
<div class="checkbox">
- If the checkbox is a required field (user must select at least one checkbox for that question), the parent div gets the CSS class 'required' added to the existing class.
- When "Save Changes" button is clicked, it should search for all divs as following:
<div class="checkbox required">
- If that div contains at least one checkbox that is checked, it should continue to the next, and so on, finally submitting the form if no errors found.
- If it comes across a
<div class="checkbox required">
that does NOT have any checkboxes checked, it should print an error message next to that question.
Below is the code that I have. Both of the questions are required. It's fairly close, I just can't seem to get it quite right. It seems to treat all divs with "required" class as one object, rather than as each as their own individual object in the boxes.each
section.
Does anyone have any suggestions? Thank you in advance.
$(document).ready(function() {
$("button").click(function(e){
e.preventDefault();
var boxes = $('div.checkbox.required');
boxes.each(function(){
if($(this).is(":checked"))
{
$(".error", this).hide();
$("form").submit();
return true;
} else if($(this).not(":checked")) {
$(".error", this).show().html("Please fill out all required fields");
return false;
}
});
});
});
label { font-weight: bold; }
.form-horizontal label span.error { color: red; }
.form-horizontal label div.error { color: red; }
.error {
padding: 2px;
font-size: 15px;
background: #FFDFDF;
border: 1px solid #FFCACA;
border-radius: 5px;
font-weight: normal;
text-align: center;
display: none;
}
<div class="checkbox required">
<h3>Question 1</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
Behavioral Follow-up
</label><br>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
Medical Follow-up
</label><br>
</div>
</div>
<p><br></p>
<div class="checkbox required">
<h3>Question 2</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
Mild
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
Moderate
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
Severe
</label><br>
</div>
</div>
<p><br></p>
<button type="button" class="btn btn-primary action-save">
<i class="fa fa-save"></i> Save changes
</button>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>