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

这是文档: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>

最佳答案

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



你可以这样做:

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>

关于javascript - 字段集有效性是什么意思？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55556569/