HTML5 所需的输入样式
在 HTML 5 中，我们可以将输入标记为 required，然后使用 CSS 中的 [required] 伪选择器选择它们。但我只想在他们尝试提交表单而不填写所需元素时对它们进行样式设置。有这个选择器吗？弹出的小消息框怎么样？
In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they try to submit the form without filling out a required element. Is there a selector for this? How about for the little message box which pops up?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
您可以使用 :valid 和 :invalid 选择器。然而
，这仅适用于支持本机验证的浏览器，并且仅适用于有意义的字段。据我所知，目前这只意味着 Chrome（也许是 Safari，但尚未检查）。
因此，通过本机验证，我的意思是在 chrome 中，如果您执行
字段的值将针对电子邮件类型字符串进行验证（无需任何其他 JavaScript），因此上面的样式会起作用的。但是，如果您要将它们附加到type="text"字段或第二个密码字段（假设与第一个密码字段匹配），您只会得到绿色，因为一切都是有效的，对于密码来说，无论如何都没有“类型”。这基本上意味着要支持所有浏览器，更重要的是，要支持更广泛的验证，您仍然必须求助于 javascript，在这种情况下分配 .valid/.invalid 类应该不是问题。 :)
You can use :valid and :invalid selectors. Something like this
However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).
So by native validation I mean that in chrome if you do
<input type="email">the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to atype="text"field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)
我求助于使用 JavaScript 将
.validated类应用于提交时的表单，然后使用该类来设置:invalid字段的样式，例如：这样字段就不会仅在提交表单后，页面加载时才显示为无效。
理想情况下，提交时会在表单上应用一个伪类。
I've resorted to using JavaScript to apply a class of
.validatedto the form on submit, then use that class to style:invalidfields, e.g.:This way fields don't show up as invalid on page load, only after the form is submitted.
Ideally there would be a pseudo class applied to the form on submit.
是的，正如 SLAks 所说，没有 CSS 选择器可以做到这一点。我怀疑这是否会在 CSS 的范围内，因为 CSS 需要检查输入的内容。
不过，最好的选择可能是在单击按钮时调用 JavaScript 验证函数，而不是实际提交表单。然后检查 [必填] 字段中是否有适当的内容，然后提交表单或突出显示未填写的必填字段。JQuery
有一些不错的插件可以为您处理此问题
http://docs.jquery.com/Plugins/validation
Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.
Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.
JQuery has some nice plugins that take care of this for you
http://docs.jquery.com/Plugins/validation
CSS 选择器 4 中有一个
:user-error伪类正在工作Draft 正是这样做的，在输入模糊和表单提交时触发。与此同时，我个人正在使用很棒的 webshims polyfill 库其中涵盖：用户错误，或者您可以使用托比答案的内容自行破解。
There's a
:user-errorpseudoclass in the CSS Selectors 4 working draft that will do exactly this, firing on both input blur and form submit.In the mean time, I'm personally using the awesome webshims polyfill library which covers :user-error, or you could hack it out yourself with something along the lines of Toby's answer.
在 Chrome 中进行了尝试和测试。我没有在任何其他浏览器中测试过它。
Tried and tested in chrome. I haven't tested it in any other browser.
此解决方案将在空白时通过属性设置所需输入字段的样式。当在 keydown 上填充必填字段时，浏览器将删除 :invalid 伪类。最新版本的 Firefox 会自动应用与此样式类似的内容，但 Chrome 和 IE 不会。
尝试一下：http://jsfiddle.net/2Ph2X/
This solution will style input fields that are required via attribute while blank. Browsers will remove the :invalid pseudo class when populating a required field on keydown. Recent versions of Firefox automatically apply something similar to this style but Chrome and IE do not.
Try it: http://jsfiddle.net/2Ph2X/
非常简单，只需在元素获得焦点时添加类，然后在提交过程中它会重点关注不正确的元素，并且客户端会一一填写和验证我相信这是不使用 JavaScript 的最佳解决方案。
Very simple, just add the class when the element is in focus, then during the submit it gives focus on the elements that are incorrect and the client is filling and validating one by one I believe it is the best solution without using JavaScript.