9.5.4　格式化错误消息

现在，页面有了有效的表单验证，但是，错误消息看上去还不是很好。它们不仅分散到了页面的四处，而且它们不能按照应该的方式突出显示。如果看上去都是粗体、红色并且出现在应用它们的表单字段下面，那么，错误消息看上去会更好一些。可以使用一些简单的CSS来做到格式化所有这些消息。

1.在validation.html文件的顶部，单击开始的＜style＞和结束的＜/style＞标签之间的空行。

这个页面有一个空白的样式表，我们将在其中添加样式。在实际情况中，你可能使用一个外部样式表，要么是其他站点所使用的主样式表，要么是专门为该表单指定的样式表（例如，forms.css）。但是，为了让这个教程保持简单，我们将只是为这个页面添加新样式。

2.在＜style＞标签中添加如下所示的CSS规则：

signup label.error{

font-size：0.8em；

color：#F00；

font-weight：bold；

display：block；

margin-left：215px；

}

CSS选择器#signup label.error找到出现在ID为signup的一个元素中的所有类为error的＜label＞标签。在这个例子中，＜form＞标签有一个signup标签，并且Validation插件把错误消息放入一个＜label＞标签中并添加类error（参见9.4.4节）。换句话说，这个CSS规则只应用于这个表单中的错误消息。

CSS属性本身非常简单：首先，字体减小到.8 em；接下来，颜色改变为红色，而文本加粗。Display：block指令告诉浏览器把＜label＞当做一个块级别元素。也就是说，浏览器把错误本身当做一个段落，在其上下都加上一个分行，而不是将错误消息靠近表单字段放置。最后，要让错误消息和表单字段对齐（从主内容区域的左边界缩进215像素），我们需要添加一个左边距。要使得具有验证问题的字段更为清楚，可以添加CSS规则来改变无效表单字段的外观。

3.为form.css文件添加一条最后的规则：

signup input.error，#signup select.error{

background：#FFA9B8；

border：1px solid red；

}

这条规则通过在无效表单字段的周围添加一个红色边框并给字段添加一个背景颜色来突出显示它。

这就是所有要做的事情。保存CSS文件并在Web浏览器中预览validation.html页面，将会看到CSS如何影响错误消息（可能需要单击浏览器的刷新按钮来看到对CSS文件所做的修改）。

最终的表单如图9-7所示。可以在chapter09目录下找到该教程的一个完整版本（complete_validation.html）。