How to check missing fields value that are required on submit

Question

How to find all the required fields and display their lightning-tab[label] to the screen if the field is empty? The user should see which tab to go to if a required field is not filled.

HTML

<lightning-tab id="zzz" label="Results">
                <div class="slds-box">
                    <lightning-radio-group            
                        label="Result rating1"
                        name="rating1"
                        value={value}
                        options={options}
                        type="button"
                        required
                    ></lightning-radio-group>
                </div>

                <div class="slds-box">
                    <lightning-radio-group            
                        label="Result rating2"
                        name="rating2"
                        value={value}
                        options={options}
                        type="button"
                        // Not required
                    ></lightning-radio-group>
                </div>
                ...
</lightning-tab>
<lightning-tab id="abc" label="Time">
              <div class="slds-box">
                  <lightning-textarea
                  ...
</lightning-tab>

JS

handleChange (event) {
    let res1 = this.template.querySelector('lightning-radio-group');
    console.log("req1 = " + res1)
    let res2 = this.template.querySelector('.lightning-radio-group');
    console.log("req2 = " + res2)
    let res3 = this.template.querySelector('lightning-radio-group[required]');
    console.log("req3 = " + res3)
    let res4 = this.template.querySelectorAll('lightning-radio-group');
    console.log("req4 = " + res4)
    let res5 = this.template.querySelectorAll('.lightning-radio-group');
    console.log("req5 = " + res5)
    let res6 = this.template.querySelectorAll('lightning-radio-group[required]');
    console.log("req6 = " + res6)
}

Also, Why is the value "SecureElement" when I use queryselector in Console.log?

req1 = SecureElement: [object HTMLElement]{ key: {"namespace":"c"} }
req2 = null
req3 = null
req4 = SecureNodeList: [object NodeList]{ key: {"namespace":"c"} }
req5 = SecureNodeList: [object NodeList]{ key: {"namespace":"c"} }
req6 = SecureNodeList: [object NodeList]{ key: {"namespace":"c"} }

Answer 1

SecureElement is just a wrapper that prevents unauthorized access to an element's internal structures. These elements make up the Virtual DOM that drives Lightning.

As far as validating the values, you can do something like this:

const allValid = this.template.querySelectorAll('lightning-radio-group').reduce((validSoFar, element) => (validSoFar && element.checkValidity()),true);

To find a specific tab to highlight, you can do something like:

const tabName = this.template.querySelectorAll('lightning-radio-group').find(element => !element.validity.valid).closest('lightning-tab').label

And, of course, to switch to the tab, just set the active-tab-value value in the lightning-tabset.