Question

所以我现在已经有这个问题了一段时间，而我却无法弄清楚它为什么不起作用。我想使用html5验证来验证我的表单，但是在点击按钮后只显示无效输入的粉红色背景。

.submitted input:invalid {
   background-color: pink;
}

我这里有jsfiddle代表我遇到的问题。

为什么这个CSS选择器不起作用？有没有其他方法来实现这一目标？如果我删除.submitted并且只保留输入：无效，它会立即生效，但我希望验证仅在我点击按钮后执行。

我确定脚本有效，因为我可以看到通过firebug将类添加到我的输入中，但是样式真的保持不变。

Answer 1

您是不是只是在寻找以下内容？请原谅，如果我误解了你的问题。

input.submitted:invalid {
   background-color: pink;
}

Answer 2

对于初学者，我不确定你在尝试用你的jsfiddle做什么。首先，为了评估字段是否无效，您需要进行一些验证然后说，在输入中添加一个类来说明它是否无效。看到你正在使用jQuery，我将给你一个使用javascript的例子。

$('form'/*could supply a name like [name="name"]*/).submit(function(event){
    if($('input[name="firstName"]').val().length<3)$('input[name="firstName"]').addClass('error');
    event.preventDefault();
}

如何设置输入样式：某个类无效？

2 个答案: