Question

当特定字段无法验证时，我正在尝试更改表单输入标签的类。我想在任何无效表单元素的正上方添加“错误”类。

这就是我的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");
  }
});

我已经看到了使用高亮/非高亮方法的建议，但这似乎不起作用。任何帮助将不胜感激。

Answer 1

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

尝试

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

演示：Fiddle

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

1 个答案: