如何使用 setCustomValidity() API 向时间表单添加错误消息答案

【问题标题】：how can setCustomValidity() API be used to add an error message to time form如何使用 setCustomValidity() API 向时间表单添加错误消息
【发布时间】：2019-03-05 20:55:07
【问题描述】：

我正在尝试向输入元素表单显示错误消息，以向用户显示特定时间不可用。我已经查看了约束验证 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>

【问题讨论】：

标签： javascript jquery html time

【解决方案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>

【讨论】：

感谢您的回答。它工作得很好，我试图在没有验证按钮的情况下输入不需要的时间时显示错误消息。并让用户选择不同的时间。这仍然可以实现吗？
感谢您的更新，我可以看到该按钮隐藏在 sn-p 中，但是在我的网页上，该按钮仍然在左侧可见。不知道为什么，所以我不得不使用 css 来隐藏它：。 .猜猜这是隐藏它的另一种方式。
我怎样才能使多次不可用？我试过或||运算符它不起作用。
if (this.value == "00:00|01:00|11:00".indexOf("01:00") != -1) 这给了我随时选择的错误消息.如果您可以显示或更新 sn-p 以允许多次禁用，我们将不胜感激。