4

我正在使用 jQuery 验证来验证一个带有单选按钮的表单（本示例中设置为两个单选按钮）。带有标签的单选按钮如下。该表单位于 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/

4

1 回答 1

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/

于 2011-05-23T19:30:53.173 回答