背景情况 站点编辑模式不断积累字段——站点名称,类别,SSH连接细节,WordPress安装位置——直到编辑任何意味着向上和向下滚动的单个长窗来找到正确的字段.
为了清理这件事,我们把它分为三个分页:"注册信息","SSH","WordPress信息".
这一变化破坏了形式上的屈服,起初很难发现。
东西坏了 标签执行本身是直截了当的。
每个标签的字段在一个 .
CSS 切换哪个可见 。
一个不活动标签被隐藏在 。
目前为止没什么不寻常的 视觉效果很好 当一个字段坐落在目前没有活动的分页时,问题就出现了,用户在从另一个分页中保存时将其空出.
点击保存按钮没有结果 。
没有出现错误消息 。
表格看起来卡住了。 root 原因:浏览器无法在某一字段上报告出错,无法显示 HTML5 格式验证工作,方法是当一个受限制字段(像 )失败时,浏览器会自动屏蔽事件,然后聚焦该字段并显示其标准验证泡(相当于调用).
注:是HTML5约束验证API的一种方法.
它检查一个窗体元素的值是否满足了它的制约(要求,图案等),如果不满足,则显示浏览器的标准出错泡.
但当失败的字段坐落在隐藏着的标签内时,浏览器就无从锁定出错的气泡.
它仍然忠实地屏蔽了提交文件——但它无法直观地看到错误,所以它只是停留,没有明显的反馈.
从用户的角度来说,这看起来完全像一个不响应的按钮.
在被打之前,每个球场都生活在同一个屏幕上,所以它从未浮出水面.
引入标签——一种刻意限制一时可见的UI模式——打破了浏览器内置验证的隐含假设:一个无效的字段总是可见.
固定:不验证加JS驱动的验证 修补是停止依赖浏览器的自动屏蔽.
在表单中添加会禁用自动块,并保证事件总是会起火,让JavaScript完全控制验证.
有两件事很重要 并不使限制本身失效。
属性类似并保持有效,而两者和伪班级仍然如所预期的那样工作.
所禁用的是浏览器的自动"块提交并显示错误"的行为.
代码在调用前找到第一个元素并强制切换到其标签 。
浏览器通过使字段能先被看到,可以不发出问题而使出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出 由于标签开关可能还没有完成绘画,所以代码在调用和.
具体案例:有条件地要求SSH配置 这种机制直接满足了SSH配置要求.
站点编辑模式有一个"仅通过浏览器更新(没有SSH)"的复选框;留下它不加控制,使得选择SSH配置文件成为强制性的.
我们想要防止保存一个既满足两个选项的站点——没有选择配置文件,而复选框没有被控制 。
属性基于复选框状态被动态切换,而其余部分则由上述的交叉拓扑验证逻辑处理.
尝试在没有选中配置文件的情况下保存, 自动打开“ SSH” 标签, 并在配置文件下放时显示错误泡 。
用户从来不需要寻找为什么储蓄不起作用.
附带好处:通过ARIA的可访问性, 标签切换JavaScript也保持同步.
它不仅仅是一个可视切换——屏幕阅读器用户也被告知目前选择哪个标签.
将一个表单分拆成分页感觉像直观的清理,但它可以悄悄地打破浏览器内置验证依赖于的假设:一个无效的字段总是在屏幕上可见.
禁用自动块 , 通过 / 使限制检查保持活性, 让 fai