Есть ли недопустимое состояние диапазона ввода?

Question

Мне нужно определить пользовательские стили проверки формы HTML5 в системе разработки моего приложения, например Bootstrap . Но я не знаю, как применить :invalid состояние к <input type="range">.

console.log($('#test').val());
$('#test').val(50);
console.log($('#test').val());

.valid-message,
.invalid-message {
  display: none;
}

.input:valid ~ .valid-message {
  display: block;
  color: green;
}

.input:invalid ~ .invalid-message {
  display: block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control">
  <input type="range" class="input range" id="test" min="1" max="20">
  <p class="valid-message">This is valid</p>
  <p class="invalid-message">This is invalid</p>
</div>

Есть ли недопустимое состояние диапазона ввода? Как я могу воспроизвести это состояние?

Answer 1

Но я не знал, как применить состояние :invalid к <input type="range">.

На самом деле вы не можете применить состояние :invalid к<input type="range">, поскольку значение всегда будет устанавливаться между значениями min и max, и вы не можете заставить его выйти за пределы диапазона, оно будет автоматически обновлено, чтобы соответствовать range.

Если вы проверите MDN <input type="range"> спецификации в разделе Значение , вы увидите, что:

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

Answer 2

Регуляторы диапазона могут быть недействительными, только если вызывается setCustomValidity().

См. Спецификацию;https://html.spec.whatwg.org/multipage/input.html#concept-input-value-default-range

Это никогда не будет valueMissing состояние, потому что оно имеет значение по умолчанию .Это никогда не будет rangeUnderflow, rangeOverflow, stepMismatch, потому что UA должен отрегулировать значение в соответствии со спецификацией.

Answer 3

При тестировании в Chrome и Firefox я считаю, что состояние :invalid не может возникнуть для type="range".Любое значение вне диапазона автоматически увеличивается или уменьшается до min или max.

Mozilla устанавливает значения по умолчанию на 0, а 100 и плохие или нет значений заменяются средними значениями.

W3C относительно диапазона ввода