HTML5必需的输入样式

Question

在HTML 5中,我们可以将输入标记为required,然后使用[required]CSS中的伪选择器选择它们.但是我只想在他们尝试提交表单时设置样式而不填写必需的元素.这有选择器吗？弹出的小消息框怎么样？

Answer 1

您可以使用:valid和:无效的选择器.像这样的东西

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

但是,这仅适用于支持本机验证的浏览器,并且仅适用于有意义的字段.据我所知,现在只表示Chrome(可能是Safari,但尚未检查).

因此,通过本机验证,我的意思是在chrome中,如果你这样做<input type="email">,字段的值将被验证为电子邮件类型字符串(没有任何额外的javascript),所以上面的样式将起作用.但是,如果你要将它们附加到一个type="text"字段或第二个密码字段(假设与第一个匹配),你只会变绿,因为一切都是有效的,而在密码的情况下,没有"类型" "无论如何.

这基本上意味着支持所有浏览器,更重要的是,更广泛的验证,你仍然需要诉诸javascript,在这种情况下分配.valid/.invalid类不应该是一个问题.:)

Answer 2

我已经使用js在提交时将一个.validated类应用于表单,然后使用该类来设置样式:invalid fields.eg:

.validated input:invalid { ... }

这样,只有在提交表单后,字段才会在页面加载时显示为无效.理想情况下,会在提交时将一个pseodo类应用于表单.

Answer 3

是的，正如 SLAks 所说，没有 CSS 选择器可以做到这一点。我怀疑这是否会在 CSS 的范围内，因为 CSS 需要检查输入的内容。

不过，最好的选择可能是在单击按钮时调用 JavaScript 验证函数，而不是实际提交表单。然后检查 [必填] 字段是否有适当的内容，然后提交表单或突出显示未填写的必填字段。

JQuery 有一些不错的插件可以为您处理这个问题 http://docs.jquery.com/Plugins/validation