Question

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

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验证功能，而不是实际提交表单。然后检查[required]字段以查找适当的内容，并提交表单或突出显示未填写的必填字段。

JQuery有一些很好的插件可以帮到你 http://docs.jquery.com/Plugins/validation

Answer 4

CSS Selectors 4 working draft中有一个:user-error伪类，它将完成此操作，同时触发输入模糊和表单提交。

与此同时，我个人使用了令人敬畏的webshims polyfill library，其中包含：用户错误，或者您可以使用Toby的回答来解决这个问题。

Answer 5

input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

尝试使用chrome进行测试。我没有在任何其他浏览器中测试它。

Answer 6

此解决方案将设置通过属性所需的输入字段，而为空。在keydown上填充必填字段时，浏览器将删除：无效的伪类。最新版本的Firefox会自动应用类似于此风格的内容，但Chrome和IE则不会。

input[required]:invalid { box-shadow: 0 0 3px 1px red }

试一试：http://jsfiddle.net/2Ph2X/

Answer 7

非常简单，只需在元素处于焦点时添加类，然后在提交期间将焦点放在不正确的元素上，客户端逐个填充和验证我相信它是不使用JavaScript的最佳解决方案

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}

HTML5必需的输入样式

7 个答案: