如果组中的任何字段无效,则突出显示红色标签

时间:2014-10-31 13:59:12

标签: jquery jquery-validate

我正在使用jquery验证来验证表单,我有以下内容:

$.validator.messages.required = ' *';

errorPlacement: function(error, element) {
    $( element )
        .closest( "form" )
        .find( "label[for='" + element.attr( "id" ) + "']" )
        .append( error );
    },
errorElement: "span",
highlight: function (element, errorClass, validClass) {
   $(element.form).find("label[for=" + element.id + "]")
   .addClass("error");
},
unhighlight: function (element, errorClass, validClass) {
    $(element.form).find("label[for=" + element.id + "]")
    .removeClass("error");
},

这样可以完美地突出显示我的红色字段标签并在其旁边添加*。但是我有一个问题,当我有一组字段时,如果第一个字段无效,则当前字段标签只会变为红色(显然标签是该字段)。

有人能告诉我如何让该标签中的任何项目的标签变为红色吗?那么,如果出生日期的月份或年份无效,可以使用

编辑:JsFiddle:http://jsfiddle.net/v9dqrtpy/

1 个答案:

答案 0 :(得分:2)

虽然它不符合规范,但快速测试表明这种快速解决方法很有效(无论如何,在Linux上的Chrome / Firefox中):

<label for="dobday"><label for="dobmonth"><label for="dobyear">Date of Birth</label></label></label>

问题在于它正在改变输入的颜色和该输入的标签(基于ID attr)。您可能应该在元素周围包装标签,并检查$(input).parents('label')是否存在并假设它是一个字段组。您可以将类似的逻辑应用于图例/字段集对,并使标准人员满意。 (确定该字段是否属于字段集,并执行相应的操作。)

http://jsfiddle.net/v9dqrtpy/3/