fieldset的有效性是什么意思？

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>