jQuery无线电验证 - 突出显示无线电的所有标签

时间:2011-05-23 18:13:02

标签: jquery validation jquery-plugins label radio

我正在使用jQuery验证来验证其上设置了单选按钮的表单(此示例中为set =两个单选按钮)。带标签的单选按钮如下。该表单位于jQueryUI对话框中。

<input type="radio" name="chooseMe" value="Yes" id="radio_yes" /><label for="radio_yes">Yes</label>
<input type="radio" name="chooseMe" value="No" id="radio_no" /><label for="radio_no">No</label>

我从jquery.com上的验证插件页面抓取了突出显示/取消强调代码 http://docs.jquery.com/Plugins/Validation/validate
(转到“选项”标签并搜索“取消高亮”)

highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
},

我遇到的第一个问题是根据需要进行验证时,只会突出显示“是”标签 第二个问题是如果我不解决验证问题并取消jQueryUI对话框,然后返回到对话框,“是”标签完全消失。

要解决第一个问题,我想要做的是突出显示“是”和“否”标签。因此,在处理突出显示代码时,我需要从元素id获取输入的名称(“chooseMe”),然后从该名称获取与该名称相关联的所有id(“radio_yes”和“radio_no”) ,突出显示所有标签。当然,那就是unhighlight代码的反面。

由于我在表单中有几个单选按钮集,我需要这是通用的(没有硬编码“chooseMe”等)。

听起来合理吗?如果是这样,唯一的问题是我不知道该怎么做:)

提前致谢。

jsFiddle根据要求:
http://jsfiddle.net/Bd688/4/

1 个答案:

答案 0 :(得分:6)

好的,这个jsfiddle的迭代突出显示了两个标签:

http://jsfiddle.net/Bd688/6/

我们的想法是获取元素的名称并查找同名的所有其他元素,然后应用您应用的相同代码。所以我改变了这个:

$(element.form).find('[name='+element.name+']').each(function (i, sameName){
   $(element.form).find("label[for=" + sameName.id + "]").removeClass(errorClass); 
});

编辑:好的,事实证明jQuery.validate并不真的喜欢你使用它的errorClass并将它应用于标签。我又上了一堂课,似乎工作正常:

http://jsfiddle.net/Bd688/7/