22

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

4

7 回答 7

29

您可以使用 :valid 和 :invalid 选择器。像这样的东西

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

但是，这仅适用于支持本机验证的浏览器，并且仅适用于有意义的字段。据我所知，现在这仅意味着 Chrome（也许是 Safari，但尚未检查）。

因此，通过本机验证，我的意思是在 chrome 中，如果您这样做<input type="email">，该字段的值将针对电子邮件类型字符串进行验证（无需任何额外的 javascript），因此上述样式将起作用。但是，如果您要将它们附加到一个type="text"字段或第二个密码字段（假设与第一个匹配），您只会得到绿色，因为一切都是有效的，并且在密码的情况下，没有“类型“无论如何。

这基本上意味着要支持所有浏览器，更重要的是，您仍然必须使用 javascript 进行更广泛的验证，在这种情况下分配 .valid/.invalid 类应该不是问题。:)

于 2011-03-10T15:48:06.537 回答
13

我求助于使用 JavaScript.validated在提交时将一个类应用于表单，然后使用该类来设置:invalid字段样式，例如：

.validated input:invalid {
  ...
}

这种方式字段不会在页面加载时显示为无效，只有在提交表单之后。

理想情况下，提交时将有一个伪类应用于表单。

于 2011-04-13T22:32:35.647 回答
4

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

您最好的选择仍然是在单击按钮时调用 javascript 验证函数，而不是实际提交表单。然后检查 [required] 字段以获取适当的内容，然后提交表单或突出显示未填写的必填字段。

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

于 2011-03-09T17:03:15.890 回答
4

CSS Selectors 4 工作草案中有一个:user-error伪类可以做到这一点，同时触发输入模糊和表单提交。

同时，我个人使用了很棒的webshims polyfill 库，它涵盖了：user-error，或者您可以按照 Toby 的回答自行破解。

于 2013-09-25T19:31:17.330 回答
2 
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 中进行了尝试和测试。我还没有在任何其他浏览器中测试过它。

于 2014-01-06T19:09:20.803 回答
1

此解决方案将在空白时设置通过属性所需的输入字段的样式。在 keydown 上填充必填字段时，浏览器将删除 :invalid 伪类。最新版本的 Firefox 会自动应用与此样式类似的内容，但 Chrome 和 IE 不会。

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

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

于 2014-06-11T21:21:47.087 回答
0

很简单，只要在元素处于焦点时添加类，然后在提交过程中将焦点放在不正确的元素上，并且客户端正在填充和验证，我相信这是不使用 JavaScript 的最佳解决方案。

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}
于 2018-05-22T16:21:48.447 回答