jQuery 验证插件 - 仅成功显示“勾号”图像，否则错误显示“交叉”图像答案

【问题标题】：jQuery validate plugin - only success show 'tick' image otherwise on error show 'cross' imagejQuery 验证插件 - 仅成功显示“勾号”图像，否则错误显示“交叉”图像
【发布时间】：2013-10-23 12:26:46
【问题描述】：

我正在尝试使用 jQuery 验证插件即时验证我的表单字段，当发现错误时，我想显示一个红色的“十字”图像，否则如果它已通过验证以显示一个绿色的“勾号”图片。

我已经完成了一半 - 绿色勾号显示条目已通过验证，但我无法显示红十字图像。我知道我需要以某种方式使用 errorPlacement 函数才能使其正常工作。

目前它显示绿色勾号很好 - 我只是想获得相同的效果，但错误上有一个红十字。

这是到目前为止的代码。如果在那里更容易查看，我已将其添加到 jsfiddle http://jsfiddle.net/BLDXC/3/

    $('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        },
        terms: {
          required: true,
        }
    },
    highlight: function (element) {
        $(element).addClass('#nonvalid')
          .closest('.form-group').removeClass('valid');
    },
    success: function (element) {
        element.addClass('valid')
          .closest('.form-group').removeClass('error');
    }
});


<style type="text/css">
label.valid {
  position: relative;
  top: -25px;
  right: 10px;
  float: right;
  width: 16px;
  height: 16px;
  background: url('/assets/images/icons/tick.png') center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}

label.nonvalid {
  position: relative;
  top: -25px;
  right: 10px;
  float: right;
  width: 16px;
  height: 16px;
  background: url('/assets/images/icons/cross.png') center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
}

</style>

【问题讨论】：

您的 css 类无效！= 错误 //////////// .addClass('#error') ?你的意思是 .addClass('error') 吗？

标签： jquery validation jquery-validate

【解决方案1】：

您需要将unhighlight 回调函数与highlight 一起使用，因为它们是互补函数。当出现错误消息时，highlight 将触发。当应该清除错误消息时，unhighlight 会触发。

这样的东西可以用来正确切换作为 CSS 一部分的图像...

概念证明：http://jsfiddle.net/BwqWh/

highlight: function (element) {
    $(element).addClass('error').removeClass('valid')
         .closest('.form-group').addClass('error').removeClass('valid');
},
unhighlight: function (element) {
    $(element).addClass('valid').removeClass('error')
        .closest('.form-group').addClass('valid').removeClass('error');
}

【讨论】：