Почему не работает required в input type=range?

Question

[Виктор]

<div id="test">
    <input id="test_1" type="range" name="test_1" min="0" max="100" value="0" step="1" required />
     <input id="test_2" type="text" name="test_2" value="" required />
  </div>

checkForm('test');
 function checkForm(val) {
                    let valid = true;
                    $("#" + val + " input:required,#" + val + " select:required").each(function () {
                        console.log($(this));
                        if ($(this).val() === "" || $(this).val() === 0 || $(this).val().length === 0) {
                            $(this).addClass("is-invalid");
                            valid = false;
                        } else {
                            $(this).removeClass("is-invalid");
                        }
                    });
                    return valid;
                }

Проверка поля с ID test_2 type="text работает, поле test_2 type="range" функция не видит в чем проблема?

Comments

[Сергей delphinpro]

А если логику включить, даже не заглядывая в документацию?
В каком бы положении не находился ползунок, значение всегда будет. Какой смысл помечать его обязательным?

[Виктор]

Сергей delphinpro, иногда так бывает, если спешишь или долго что то делаешь, да вы совершенно правы, логика в данном примере отсутствует, документация не читается

Answer 1

[Виктор Майоров]

Атрибут required не применяется к типу range.
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Вам не нужно проверять значение ползунка. Значение всегда будет допустимым.

Answer 2

[Виктор]

Note color and range don't support required
Спасибо за ответ