jQuery form validation with checkbox / radio - html

Question

The code is not working well at all. Where is the problem?
I want the Required Fields to show an error message when I click the Submit button (if there is no value in the checkbox). But if there is a value in the requested field, the error message will be hidden.
It's not working at all. I want to fix this by keeping my HTML structure straight.
$('form.trexcterc').on('submit', function () {
$('.checkbox_required').parent().next('.error').remove();
if (!$('.checkbox_required input[required')){
if (!$('.checkbox_required input:checkbox').is(':checked') || !$('.checkbox_required input:radio').is(':checked')) {
$(".checkbox_required").parent().after("<span class='error'>error message..</span>");
}
}
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item{
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="submit" />
</form>

Answer 1

Main issue is that the native required attribute is preventing form submission, so your submit event listener isn't triggered. Instead you can use a simple click event listener.
Another issue is that you need to iterate over each input.
$('button').on('click', function() {
$('.error').remove();
$('.checkbox_required input[required]').each((i, el) => {
if (!el.checked) {
$(el).closest(".checkbox_item").after("<span class='error'>error message..</span>");
}
});
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item {
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<button type="submit" name="submit">submit</button>
</form>
Also note that conditions like this: if (!$('.checkbox_required input[required')) doesn't work in jQuery, since selectors always returns a jQuery object. You need to use .length to check if element exists. You also have a missing ] there, it should be
if (!$('.checkbox_required input[required]').length)