How do I make my validation lables/images appear outside the form elements

How do I make my validation lables/images appear outside the form elements

I have used the excellent jQuery Validation plugin on my contact form.  A failed validation for a field results in an image of a cross appearing to the right of the form field itself.  However, a successful validation results in the image of a tick appearing within the form field (see my attached screenshot).

I cannot seem to get the tick image to appear in the same place as the cross (i.e. outside the form field).  The reason for me wanting this is because if the image appears in the field, even aligned to the right, eventually the text typed within the field goes over the top of it which looks unprofessional.

Could someone suggest how I could achieve this please?  

My JS code is here:

  1. $(document).ready(function() { 
  2.    $("#theform").validate({ rules: { form_name: { required: true }, form_phone: { required: true, phoneUK: true }, form_email: { email: true }, form_message: { required: true } }, messages: { form_name: "    ", form_phone: "    ", form_email: "    ", form_message: "    " }, 
  3.      validClass: "success", 
  4.      errorElement: "span", 
  5.      success: "success", 
  6.      highlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass);             $(element).removeClass(validClass); } } ); });

A snippet of my CSS is:

  1. .success {
  2.   background: #FFFFFF url(../images/tick.png) right no-repeat;
  3. }

  5. .error {
  6.   background: transparent url(../images/cross.png) right no-repeat;
  7. }

Thanks for your time.