jQuery / Validate - 复选框的不同错误/成功突出显示规则

时间:2012-12-18 17:44:42

标签: jquery jquery-validate

现在我的表单使用以下规则完美地工作,在表单输入的右侧添加带有绿色勾号或红色错误消息的标签:

highlight: function(label) {
            $(label).closest('.form-element').addClass('error')
            .closest('.form-element').removeClass('success');;
        },
        success: function(label) {
            label
            .text('OK!').addClass('valid')
            .closest('.form-element').addClass('success');
        },

相关的CSS是:

#jqvForm label.valid {
  width: 16px;
  height: 16px;
  background: url("../images/tick.png") center center no-repeat;
  display: inline-block;
  text-indent: -9999em !important;
  position: absolute;
}
#jqvForm label.error {
  color: red;
  display: inline;
  float: none;
  font-size:11px;
  font-weight: bold;
  margin-left: 10px;
  text-align: left;
  padding: 2px 8px;
  margin-top: 2px;
}

然而 - 我在页面上有一个复选框,用户必须同意这些条款&条件。将错误消息或刻度标记放在旁边看起来非常糟糕。

有没有办法验证为复选框设置不同的突出显示/成功功能?或者我最好不要对这个盒子使用验证,而只是使用其他东西确保盒子被检查?

1 个答案:

答案 0 :(得分:1)

来自options documentation它覆盖突出显示以确定哪些字段以及如何突出显示,因此如果您的t + c复选框有一个类'myCheckbox',您可以执行类似这样的操作

success: function (label) {
    if (label.hasClass('myCheckbox')) {
        // do something with the checkbox
    }
    else {
        // do something with other fields
    }
},
highlight: function (element, errorClass) {
    var v = $(element);
    if (v.hasClass('myCheckbox')) {
        // do something with the checkbox
    }
    else {
        // do something with other fields
    }
}