如何使用setCustomValidity（）API將錯誤消息添加到時間表單

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>