语义UI - 不引人注意地测试表单有效性

Question

我的页面中有多个form类别div,我想知道是否有一种方法可以用来不引人注意地测试每种方法的有效性form？每个div类form都有一个button(具有类ok),允许用户继续通过form divs.我想button在页面加载时禁用它,以确保从forms中收集所有相关数据,并且仅在form有效允许进展时才收集.我已经尝试向每个change调用语义的表单元素添加一个函数,is valid但它会突出显示每个有效性问题.

这个JSFiddle说明了我的问题:https://jsfiddle.net/annoyingmouse/3z1wfjeL/

当名字字段被点击到它会自动显示所有表格上的错误-我想要的错误,只显示在一个必填字段已经模糊,而不是示出使用测试的结果的所有错误is valid.

有人有任何想法吗？

Answer 1

这不是一个完整的解决方案，但它是朝着解决方案迈出的一小步。

使用onInvalid和onValid回调而不是您当前正在执行的操作。

我已经修改了你的小提琴来演示。

现在的问题是，例如，当您想要启用按钮时，某人拥有直到最后一个元素为止的所有内容next（因为在它模糊之前它不会有效或无效）。

目前，剩下的问题无法通过语义用户界面来解决，因为它没有“静默验证”选项。请参阅此未决问题：https://github.com/Semantic-Org/Semantic-UI/issues/703。一种选择是使用另一个库进行静默验证，但这确实不理想。不过，您也可以为语义用户界面贡献一个补丁。

如果您感兴趣，我想我已经修补了 2.1.8，以便它可以is valid静默运行（现在只需让它摆脱无效提示即可）。看看要点。（它远非完美，如果我有时间，我会提交拉取请求，搜索silent，你会发现我的更改）