title: Debugging failing jQuery validate addMethod
body: <p>I have a page where almost every click is handled by delegate().
  <a href="http://itsneworleans.com/shows/midnight-menu-plus-1/blogs/after-midnight?preview=1" rel="nofollow">http://itsneworleans.com/shows/midnight-menu-plus-1/blogs/after-midnight?preview=1</a></p>
  
  <p>I set up jQuery validate like so</p>
  
  <pre><code>$(document).ready(function(){
      $(".commentform form").validate({
          rules: {
              antispam: { equalToParam: "INO" }
          }                      
      });
      jQuery.validator.addMethod("equalToParam", function(value, element, param) {
         return value == param;
      },
      "Anti-spam field does not match requested value.");
  });
  </code></pre>
  
  <p>if I check in console with </p>
  
  <pre><code>$.validator.methods['equalToParam']
  </code></pre>
  
  <p>I get back </p>
  
  <pre><code>function (value, element, param) { return value == param; }
  </code></pre>
  
  <p>so that looks good.</p>
  
  <p>The validation works on the form submission BUT the equalToParam method has no effect.  Only the "required" events occur for it.</p>
  
  <p>The field HTML is</p>
  
  <pre><code>&lt;input name="antispam" type="text" class="required" id="antispam" size="5" /&gt;
  </code></pre>
  
  <p>Where am I going wrong?</p>
  
  <p><strong>EDIT</strong>  Here is whole form code (generated from PHP script and added to page via AJAX):</p>
  
  <pre><code>&lt;? if ($post = (int) $_POST['pID']) { ?&gt;
  &lt;div class="commentform"&gt;
      &lt;form&gt;
      &lt;div class="commenttext"&gt;Comment:&lt;br&gt;
          &lt;textarea name="comment" class="required"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="commenttext"&gt;Your name:&lt;br&gt;
          &lt;input type="text" name="name" class="required"&gt;
      &lt;/div&gt;
      &lt;div class="commenttext"&gt;Your email (will not be publically visible):&lt;br&gt;
          &lt;input type="text" name="email" class="required email"&gt;
      &lt;/div&gt;
      &lt;div class="commenttext"&gt;Type the letters INO here to help us beat spam!&lt;br&gt;
          &lt;input name="antispam" type="text" class="required" id="antispam" size="5" /&gt;
      &lt;/div&gt;
      &lt;div class="commenttext"&gt;
          &lt;input type="button" name="submitcomment" class="submitcomment" value="Submit Comment"&gt;
          &lt;input type="hidden" name="post" value="&lt;?=$post?&gt;"&gt;
          &lt;? if ($parentComment = (int) $_POST['cID']) { ?&gt;
              &lt;input type="hidden" name="parent" value="&lt;?=$parentComment?&gt;"&gt;
          &lt;? } ?&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;? } ?&gt;
  </code></pre>
  
  <p><strong>EDIT AGAIN</strong>  And here's the click delegation code...</p>
  
  <pre><code>$("body").delegate(".submitcomment", "click", function(e) {
      e.preventDefault(); 
      var theform = $(this).closest("form");
      console.log('Posting comment');
  
      if ($(".commentform form").valid()) {       
          $.ajax({
            type: "POST",
            url: "/addComment.php",
            data:  theform.serialize() 
          }).done(function(html) {
              if (html == 'OK') {
                  $(theform).html("&lt;div class='commentposted'&gt;Your comment has been received. Thank you.  A moderator will review it for public viewing.&lt;/div&gt;");
              } else {
                  alert(html);
              }
        });
      }
  });
  </code></pre>
  
  <p><strong>EDIT</strong> Here is the code which populates the form into the space where the Reply to Post link was:</p>
  
  <pre><code>$("body").delegate(".getcommentform", "click", function(e) {
      e.preventDefault(); 
      var pIDval = $(this).attr("data-pid");
      var cIDval = $(this).attr("data-cid");
      var thebox = $(this).closest("div.commentformcontainer");
      console.log('Getting comment form');
      $.ajax({
        type: "POST",
        url: "/commentForm.php",
        data:  { pID : pIDval, cID : cIDval }
      }).done(function(html) {
          thebox.html(html);          
    });
  });
  </code></pre>