What does the fieldset validity mean?

Question

Here's the documentation: HTMLFieldSetElement - Web APIs | MDN.
I wonder what the fieldset validity mean. Does it mean the validity of all the inputs, for example, inside the fieldset? Then why doesn't the following work if you enter out-of-range values:

var form = document.querySelector('form');

form.querySelector('button').addEventListener('click', function() {
  var fieldsets = form.querySelectorAll('fieldset');
  for (var fieldset of fieldsets) {
    var output = fieldset.querySelector('output');
    if (fieldset.validity.valid) {
      output.value = 'Valid!';
    } else {
      output.value = 'Invalid!';
    }
  }
});

input {
  width: 4em;
}

input:invalid {
  outline: 1px solid red;
}

<form>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <button type="button">Validate</button>
</form>

Answer 1

https://dev.w3.org/html5/pf-summary/forms.html#the-fieldset-element

Constraint validation: fieldset elements are always barred from constraint validation.

https://dev.w3.org/html5/pf-summary/forms.html#barred-from-constraint-validation

A listed form-associated element is a candidate for constraint validation unless a condition has barred the element from constraint validation. (For example, an element is barred from constraint validation if it is an output or fieldset element.)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement#Methods

HTMLFieldSetElement.reportValidity() Always returns true because objects are never candidates for constraint validation.

You can do this:

var form = document.querySelector('form');

form.querySelector('button').addEventListener('click', function() {
  var fieldsets = form.querySelectorAll('fieldset');
  for (var fieldset of fieldsets) {
    var output = fieldset.querySelector('output');
    output.value = fieldset.querySelectorAll("input:invalid").length===0 ?  'Valid!' : 'Invalid!';
  }
});

input {
  width: 4em;
}

input:invalid {
  outline: 1px solid red;
}

<form>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <button type="button">Validate</button>
</form>

Or loop:

var errors = {
  "valueMissing": "Missing",
  "typeMismatch": "Wrong type",
  "patternMismatch": "Wrong pattern",
  "tooLong": "Too long",
  "tooShort": "Too short",
  "rangeUnderflow": "< @",
  "rangeOverflow": "> @",
  "stepMismatch": "Step error",
  "badInput": "Not a number",
  "customError": ""
}
function getError(inp) {
  for (var val in inp.validity) {
    if (inp.validity[val]) {
      var error = errors[val];
      if (val === "rangeUnderflow") error = error.replace("@",inp.min)
      if (val === "rangeOverflow")  error = error.replace("@",inp.max)
      return error;
    }  
  }
}

var form = document.querySelector('form');

form.querySelector('button').addEventListener('click', function() {
  var fieldsets = form.querySelectorAll('fieldset');
  for (var fieldset of fieldsets) {
    var output = fieldset.querySelector('output');
    output.value = 'Valid!';
    var inputs = fieldset.querySelectorAll("input");
    var errors = []
    for (var inp of inputs) {
      if (!inp.validity.valid) {
        errors.push(getError(inp));
      }  
    }
    if (errors.length) output.value=errors.join(" and ")
  }
});

input {
  width: 4em;
}

input:invalid {
  outline: 1px solid red;
}

<form>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <fieldset>
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <input type="number" step="any" min="0" max="100">
    <output></output>
  </fieldset>
  <button type="button">Validate</button>
</form>