jquery - ブートストラップとフォーム検証の使用 - 入力フィールドの右側に目盛り画像を取得する

Question

Bootstrap 3フレームワークとjQuery検証プラグインを使用して、各フォームフィールドの右側に「緑色の目盛り」画像を直接表示することにより、フォームフィールドにエラーを表示しています.右。

このデモで次のフォームをシミュレートしようとしています http://alittlecode.com/files/jQuery-Validate-Demo/index.html

<div class="col-xs-10">
  <div class="form-group">
    <label for="inputFirstName" style="display: none;">First Name</label>
    <?= form_input('first_name', '', "id='first_name' class='form-control {$error}'"); ?>
  </div>
  <div class="form-group">
    <label for="inputLastName" style="display: none;">Last Name</label>
    <?= form_input('last_name', '', "id='last_name' class='form-control {$error}'"); ?>
  </div>                    
</div>

私のCSS/JSは次のとおりです。

<script type="text/javascript" src="/assets/js/includes/jquery.validate.min.js"</script>
<script type="text/javascript">
$(document).ready(function () {

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
    }
});

});
</script>
<style type="text/css">
   label.valid {
  width: 16px;
  height: 16px;
  background: url('/assets/images/icons/tick.png') center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
 }
 label.error {
 font-weight: bold;
 color: red;
 padding: 2px 8px;
 margin-top: 2px;
 }