LWC - lightning-radio-group required on radio options is not working

Question

I have the standard lightning-radio-group component on my LWC with below code:

<lightning-radio-group name="Selection" label="Is this your choice?"
                        required options={radioOptions} value={selectedVal} type="radio" data-id="radioGroup" onchange={handleRadioChange}>
                        </lightning-radio-group> 

JS:

handleRadioChange(event){
    try{
        this.selectedVal= event.target.value;
    } catch(e){
        console.error('handleRadioChange error: ', e);
    }
}

I can see the little red asterisk right before the label, but when I click on 'Continue' button on the page, I am not seeing any standard error validation. Am I missing something? Do I need to write some custom logic to capture what is being selected and throw custom errors if non-selected?

Reference: lightning-radio-group

Update: Upon trying the solution from sfdcfox, I am able to get the custom validation on lightning-radio-group work the first time, but the validation is completely getting skipped any further tries. Here is my attempt:

let isValid = [...this.template.querySelectorAll('[data-id="radioGroup"]')].reduce(
        function(validSoFar, field) {
            field.reportValidity();
            return validSoFar && field.checkValidity();
        }, true
    );
      if(!isValid) {
        //this.reportError(); // Whatever you want to do here
        //console.log('isValid INSIDE: ' +isValid);
        isValid = !isValid; //Tried to revert the value, still didn't work. Validation didn't fire after the first try. 
        return;
    } 

Answer 1

In a flow, you need a validate function, as described in the documentation:

@api validate() {
  const isValid = [...this.template.querySelectorAll('.input')].reduce(
    function(validSoFar, field) {
      field.reportValidity();
      return validSoFar && field.checkValidity()
    }, true
  );
  if(isValid) {
    return { isValid: true };
  } else {
    return { isValid: false, errorMessage: 'Check all required fields.' };
  }
}

If not using a flow, you need to handle validation on the button's click handler:

handleContinueButtonClick(event) {
  const isValid = [...this.template.querySelectorAll('.input')].reduce(
    function(validSoFar, field) {
      field.reportValidity();
      return validSoFar && field.checkValidity()
    }, true
  );
  if(!isValid) {
    this.reportError(); // Whatever you want to do here
    return;
  }
  this.continueToNext(); // Ditto
}