jquery - jQuery 検証プラグイン - 成功した場合のみ 'tick' 画像が表示され、それ以外の場合はエラーで 'cross' 画像が表示されます

Question

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>