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

当特定字段验证失败时，我正试图更改表单输入标签的类。我想将"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");
  }
});

我看到了使用高亮显示/取消高亮显示方法的建议，但这似乎不起作用。如有任何帮助，我们将不胜感激。