字段集有效性是什么意思？

Question

这是文档：HTMLFieldSetElement - Web APIs | MDN。
我想知道fieldset 有效性是什么意思。是否意味着所有inputs 的有效性，例如fieldset 内部？那么，如果您输入超出范围的值，为什么以下操作不起作用：

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

约束验证：字段集元素始终被禁止进行约束验证。

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

除非某个条件禁止该元素进行约束验证，否则列出的与表单相关的元素是约束验证的候选者。 （例如，如果一个元素是输出或字段集元素，则该元素被禁止进行约束验证。）

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

HTMLFieldSetElement.reportValidity() 总是返回 true，因为对象永远不是约束验证的候选对象。

你可以这样做：

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>

或循环：

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>