使用jquery验证输入标签的颜色更改

Question

我试图在特定字段无法验证时更改表单输入标签的类。我想将'error'类添加到任何无效表单元素正上方的跨度。

这是我的HTML看起来像：

<span class="label">What kind service do you need?</span><br /> 
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 1</label></div> 
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 2</label></div> 
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 3</label></div> 
<div style="float: left; width: 220px; margin: 5px 0 0 0;"><input type="checkbox" name="serviceType"><label>Option 4</label></div> 
<div id="clear"></div> 

<span class="label">When do you need service?</span><br /> 
<div id="inputSmall"><input type="text" class="small" name="serviceDate" /></div> 

<span class="label">How often?</span><br /> 
<div id="inputSmall"><select class="small" name="recurringBasis"> 
<option value=""></option> 
<option value="single">One time</option> 
<option value="weekly">One a week</option> 
</select></div> 

这是我的JS：

$("#quote").validate({ 
    rules: { 
    serviceDate: "required", 
    recurringBasis: "required", 
    serviceType: { 
     required: true, 
     minlength: 1    
    } 
    }, 
    highlight: function(element) { 
    $(element).prev('span').addClass("error"); 
    }, 
    unhighlight: function(element) { 
    $(element).prev('span').removeClass("error"); 
    } 
}); 

我见过的建议使用高光/ unhighlight的做法，但也不至于似乎工作。任何帮助将不胜感激。

Answer 1

您选择$(element).prev('span')是错误的

尝试

$(element).parent().prev().prev('span') 

演示：。Fiddle