英文:
Min and Max are not working as expected on input='time'
问题
关于min和max属性在<input type="time"/>中的工作原理，我有一些疑惑。使用这段代码：
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
我期望在9:00之前和18:00之后的时间不可选。但事实并非如此。你可以在mdn web docs上尝试。我在Chrome、FireFox和Edge上进行了测试。
我在这里遗漏了什么？
英文:
I am a little bit confused about how the min and max attributes work, when <input type="time"/> is set. With this code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!-- language: lang-html -->
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required>
<!-- end snippet -->
I would expect a time before 9:00 and and after 18:00 to not be selectable. But it is. You can try that on the mdn web docs. I tested it on Chrome, FireFox and Edge.
What am I missing here?
答案1
得分: 1
内置表单验证发生在表单提交时（即点击提交按钮时）或调用 reportValidity 时。
它不会阻止首次输入无效数据，只是在数据发送到服务器之前捕获它。
此截图显示了在Firefox中的输出：
<form>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required value="08:00">
<button>提交</button>
</form>
英文:
Built-in form validation takes place when the form is submitted (i.e. when the submit button is clicked) or when reportValidity is called.
It doesn't prevent invalid data being entered in the first place. It just catches it before it is sent to the server.
This screenshot shows the output in Firefox:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setTimeout(() => document.querySelector('form').reportValidity(), 50);
<!-- language: lang-html -->
<form>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required value="08:00">
<button>Submit</button>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论