How to create custom message container for HTML5 checkbox validation

I'm using the following script to validate two unrelated checkboxes. This requires that at least one of the two checkboxes are checked. How can I configure it so that the HTML5 validation alert bubble doesn't point to the first checkbox?

$( document ).ready(function() {
$('#theForm').on('submit', submitFrm);

var $checkbox = $('.custom-class')

$checkbox.on('change', function(){
  var checked = false;

  $checkbox.each(function(){
    checked = checked || $(this).is(':checked')
  })

  $checkbox.prop('required', !checked)

})

function submitFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
}

});

Here's the markup for the two unrelated checkboxes:

<input type="checkbox" id="group0001" name="group0001" value="on" class="check custom-class" required oninvalid="this.setCustomValidity('Please select at least one option to proceed')"><label for="subscription">Email Group 1 Communication</label>

<input type="checkbox" id="groupsAll" name="groupsAll" value="on" class="check custom-class" required><label for="subscription">All Communication</label>