9.5.3　验证复选框和单选按钮

复选框和单选按钮通常成组出现，并且为一个组中的几个复选框或单选按钮添加验证是一个很难的过程，因为要找到一组中的所有复选框或按钮。幸运的是，Validation插件负责最难的部分，并且使得我们很容易快速验证这些表单字段的类型。

1.找到第一个复选框的HTML，即＜input name="hobby"type="checkbox"id="heliskiing"value="heliskiing"＞，并且添加class和title属性，以便该标签如下所示（修改的地方用粗体表示）：

＜input name="hobby"type="checkbox"id="heliskiing"

value="heliskiing"class="required"

title="Please check at least 1 hobby."＞

这里，我们使用9.4.2节所介绍的基本验证技术，也可以使用高级验证技术，并且把规则和错误消息作为validate（）函数的一部分包含，但是，如果只需要一个验证规则和错误消息，那么基本技术更简单并且不容易出错。

在这个例子中，所有3个复选框具有相同的名字，因此Validation插件将它们视为一组。换句话说，这个验证规则应用到了所有3个复选框，即便只能为一个复选框添加class和title属性。实际上，我们已经要求访问者至少选中一个复选框，然后才能够提交表单。

我们将对页面底部的单选按钮做同样的事情。

2.找到第一个单选按钮的HTML，即＜input type="radio"name="spam"id="yes"value="yes"＞，并且为标签添加class和title属性，如下所示（修改的部分用粗体表示）：

＜input type="radio"name="spam"id="yes"value="yes"

class="required"title="Please select an option"＞

相关的一组单选按钮总是具有同样的名字（在这个例子中是spam），因此，即便我们只是对一个按钮添加了规则和错误消息，它也会应用到所有的3个按钮。由于字段是必需的，因此访问者必须选择3个单选按钮中的一个才能提交表单。

3.保存文件，在Web浏览器中预览它，并且单击提交按钮。

你可能注意到一些事情看起来有些奇怪：当复选框和单选按钮的错误消息出现的时候，它们直接出现在第一个复选框和单选按钮的后面（如图9-9所示的圆圈所示）。在最糟的情况下，消息甚至出现在表单字段及其标签之间（例如，在复选框和标签“Heli-skiing”之间）。

Validation插件把错误消息直接放置在应用了验证规则的表单字段的后面。通常这是没问题的，当消息直接出现在一个文本字段或按钮的后面的时候，这看上去很好（就像本教程前面的例子中那样）。但是在这个例子中，消息应该放到其他的地方，最好是在所有的复选框或单选按钮的后面。

幸运的是，Validation插件有一种方法来控制错误消息的位置。可以通过给validate（）函数传递另一个JavaScript对象来为错误消息放置创建自己的规则。

4.找到在前面添加的验证脚本，并且在messages对象的结束花括号的后面（但是在//end messages注释的前面）输入一个逗号。在messages对象的后面插入一个空行，然后输入：

errorPlacement：function（error, element）{

if（element.is（"：radio"）||element.is（"：checkbox"））{

error.appendTo（element.parent（））；

}else{

error.insertAfter（element）；

}

}//end errorPlacement

图　9-9　Validation插件在无效的表单字段之后放置错误消息。在复选框和单选按钮的例子中，这看上去很难看。为了把错误消息放置在别处，需要为插件的validate（）函数提供一些指令

Validation插件可以通过编程来接收一个可选的errorPlacement对象，它只是一个JavaScript函数，用来确定错误消息放置在何处。这个函数接收错误消息以及应用错误消息的表单元素，因此，可以使用一个条件语句（参见3.1.1节）来检查表单字段是一个单选按钮还是一个复选框。如果是，错误消息添加到包含了按钮或复选框的元素的末尾。在这个页面的HTML中，一个＜div＞标签包围了一组复选框，而另一个＜div＞标签包围了单选按钮。因此，使用jQuery的appendTo（）函数（参见本书4.7节的介绍）把错误消息放置在结束的＜/div＞标签的前面。

我们已经完成了这个表单的所有JavaScript编程。下面是包含了$（document）.ready（）函数的完整脚本。

1$（document）.ready（function（）{

2$（'#signup'）.validate（{

3 rules：{

4 email：{

5 required：true，

6 email：true

7}，

8 password：{

9 required：true，

10 rangelength：[8，16]

11}，

12 confirm_password：{equalTo：’#password'}，

13}，//end rules

14 messages：{

15 email：{

16 required："Please supply an e-mail address."，

17 email："This is not a valid email address."

18}，

19 password：{

20 required：'Please type a password'，

21 rangelength：'Password must be between 8 and 16 characters long.’

22}，

23 confirm_password：{

24 equalTo：'The two passwords do not match.’

25}

26}，//end messages

27 errorPlacement：function（error, element）{

28 if（element.is（"：radio"）||element.is（"：checkbox"））{

29 error.appendTo（element.parent（））；

30}else{

31 error.insertAfter（element）；

32}

33}//end errorPlacement

34}）；//end validate

35}）；//end ready（）