Что означает валидность набора полей?

Вот документация: HTMLFieldSetElement — веб-API | МДН.
Интересно, что означает валидность 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>

javascript html forms validation constraints

07.04.2019 09:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

591

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

https://dev.w3.org/html5/pf-summary/forms.html#the-fieldset-элемент

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#Методы

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

Ты можешь это сделать:

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>

Спасибо за ответ, но я уже знаю, как заставить образец формы работать.

— 07.04.2019 10:08

Смотрите обновление. Оказывается, объекты <fieldset> никогда не являются кандидатами на проверку ограничений. Он просто наследует объект допустимости htmlelement, но ничего с ним не делает.

— 07.04.2019 10:09

Это то, что я увидел здесь в первый раз.

— 07.04.2019 10:13

Да, и если копнуть глубже: developer.mozilla.org/en-US/docs/Web/API/…

— 07.04.2019 10:18

07.04.2019 10:02