输入范围是否存在无效状态？

Posted 2021-04-07

我需要在我的应用程序的设计系统中定义自定义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>

输入范围是否存在无效状态？我该如何重现那个州？

答案

只有在调用setCustomValidity()时，范围控制才有效。

参考规范; https://html.spec.whatwg.org/multipage/input.html#concept-input-value-default-range

它永远不会是valueMissing状态，因为它具有默认值。它永远不会是rangeUnderflow，rangeOverflow，stepMismatch，因为UA必须根据规范调整值。

另一答案

但我不知道如何将:invalid州应用于<input type="range">。

实际上你不能将:invalid状态应用于<input type="range">，因为该值将始终设置在min和max值之间，并且你不能强制它超出范围它将自动更新以适合range。

如果在“值”部分中检查MDN <input type="range"> specifications，则可以看到：

如果尝试将值设置为低于最小值，则将其设置为最小值。同样，尝试将值设置为高于最大值会导致将其设置为最大值。

另一答案

通过在Chrome和Firefox上进行测试，我认为:invalid不会出现type="range"状态。任何超出范围的值都会自动增加或减少到min或max。

Mozilla设置defaults to 0 and 100和bad or no values被平均值取代。

W3C about input range