I have integrated the native-validations library into my form validation process. Everything is working well, except for an error message that appears when I try to submit a group of checkboxes without selecting any. The error message displayed is "null".
You can see a demo of this issue by visiting this link and clicking on "submit" without filling in any fields: Demo Link
You can also check out the code sandbox here: Code Sandbox
It seems like there might be an error in the following function:
function checkBoxGroupValidate(event) {
//get all checked checkboxes for a group and if its null then mark it invalid or valid
var totalChecked = event.target.parentNode.querySelector("input[name$='[]']:checked");
if (totalChecked === null) {
var errorMessage = '';
if(event.target.dataset.requireError){
errorMessage = event.target.dataset.requireError;
}else if(event.target.parentNode.dataset.requireError){
errorMessage = event.target.parentNode.dataset.requireError;
}else {
errorMessage = OptionGroupMessage;
}
event.target.parentNode.classList.remove(SuccessClass);
event.target.parentNode.classList.add(ErrorClass);
if (event.target.parentNode.querySelector(HelpBlockSelector) === null) {
event.target.parentNode.insertAdjacentHTML("afterbegin", MessageTag.replace("{0}", errorMessage));
}
} else {
event.target.parentNode.classList.remove(ErrorClass);
event.target.parentNode.classList.add(SuccessClass);
var spanError = event.target.parentNode.querySelector(HelpBlockSelector);
if (spanError !== null) {
event.target.parentNode.removeChild(spanError)
}
}
}