title: JQuery validator custom error placement not working
body: <p>I created a checkbox using custom images and with the great help of @TrueBlueAussie. I am now stuck on the next step which is placing a validation error message after the custom checkbox.</p>
  
  <p>If I unhide the checkbox I can see that it is being checked / not checked. I also get the validation error appears as expected. Although this works, unchecking checkbox via the image button does not remove the error messgae.</p>
  
  <p>Furthermore, when I add back <code>display:none</code> to the checkbox, the error message does not show at all. What is wrong with my code?</p>
  
  <p>I have created a <a href="http://jsfiddle.net/TheRealPapa/5y213o6c/" rel="nofollow">FIDDLE here</a> to show the issue. Please remove <code>display:none</code> from the checkbox to see the symptoms.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;"&gt; 
  &lt;img class="chk-img" id="AcceptTerms" src="../../../wp-content/uploads/misc/notselected.png"&gt;
  &lt;span id="ts-cs-accept"&gt;I have read and accept the Terms and Conditions.&lt;/span&gt;
  </code></pre>
  
  <p>jQuery validator code:</p>
  
  <pre><code> jQuery("#InstallerForm").validate({
       rules: {
           InstBizNam: {
               required: true
           },
           AcceptTerms_check: {
               required: true
           }
       },
       messages: {
           InstBizNam: "Please enter business name",
           AcceptTerms_check: "Please read and accept the program terms to submit your application"
       },
       errorPlacement: function (error, element) {
           if (element.attr("name") == "AcceptTerms_check") {
               error.insertAfter("#ts-cs-accept");
           } else {
               error.insertAfter(element);
           }
       },
       submitHandler: function (form) {
           alert("SUBMITTED!");
       }
   });
  </code></pre>