使用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