как можно использовать API setCustomValidity () для добавления сообщения об ошибке в форму времени

Question

Я пытаюсь показать сообщение об ошибке в форме ввода элемента, чтобы показать пользователю, что конкретное время недоступно. Я рассмотрел различные примеры API проверки ограничений, но я не уверен, как реализовать это для формы времени. Может кто-нибудь показать пример, пожалуйста, чтобы объяснить это.

var time = document.getElementById("#validtime");

time.addEventListener("input", function(event) {
  if (time.validity) {
    time.setCustomValidity("time is not avalible, please choose a different time");
  } else {
    time.setCustomValidity("");
  }
});

<div class="form-group">
  <label for="time">Time</label>
  <input type="time" name="time" class="form-control" required>
</div>

Answer 1

В вашем коде есть ошибки.В любом случае, давайте предположим, что вы не хотите, чтобы пользователь мог ввести время «00:00».В этом случае вы можете сделать что-то вроде:

document.querySelector('[type=submit]').style.visibility='hidden';
document.getElementById("validtime").addEventListener("input", function (event) {
    if ("00:00|01:00|11:00".indexOf(this.value) != -1) {
        this.setCustomValidity("time is not avalible, please choose a different time");
        this.closest('form').querySelector('[type=submit]').click();
    } else {
        this.setCustomValidity("");
    }
});

<form>
    <div class="form-group">
        <label for="validtime">Time</label>
        <input id="validtime" type="time" name="time" class="form-control" required>
    </div>
    <input type="submit" value="Validate">
</form>