Что означает валидность набора полей? - PullRequest
Новая
       9

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

2 голосов
/ 07 апреля 2019

Вот документация: HTMLFieldSetElement - веб-API |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>

1 Ответ

2 голосов
/ 07 апреля 2019

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>
...