Debugging failing jQuery validate addMethod

Question

I have a page where almost every click is handled by delegate(). http://itsneworleans.com/shows/midnight-menu-plus-1/blogs/after-midnight?preview=1

I set up jQuery validate like so

$(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.");
});

if I check in console with

$.validator.methods['equalToParam']

I get back

function (value, element, param) { return value == param; }

so that looks good.

The validation works on the form submission BUT the equalToParam method has no effect. Only the "required" events occur for it.

The field HTML is

<input name="antispam" type="text" class="required" id="antispam" size="5" />

Where am I going wrong?

EDIT Here is whole form code (generated from PHP script and added to page via AJAX):

<? if ($post = (int) $_POST['pID']) { ?>
<div class="commentform">
    <form>
    <div class="commenttext">Comment:<br>
        <textarea name="comment" class="required"></textarea>
    </div>
    <div class="commenttext">Your name:<br>
        <input type="text" name="name" class="required">
    </div>
    <div class="commenttext">Your email (will not be publically visible):<br>
        <input type="text" name="email" class="required email">
    </div>
    <div class="commenttext">Type the letters INO here to help us beat spam!<br>
        <input name="antispam" type="text" class="required" id="antispam" size="5" />
    </div>
    <div class="commenttext">
        <input type="button" name="submitcomment" class="submitcomment" value="Submit Comment">
        <input type="hidden" name="post" value="<?=$post?>">
        <? if ($parentComment = (int) $_POST['cID']) { ?>
            <input type="hidden" name="parent" value="<?=$parentComment?>">
        <? } ?>
    </div>
    </form>
</div>
<? } ?>

EDIT AGAIN And here's the click delegation 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("<div class='commentposted'>Your comment has been received. Thank you.  A moderator will review it for public viewing.</div>");
            } else {
                alert(html);
            }
      });
    }
});

EDIT Here is the code which populates the form into the space where the Reply to Post link was:

$("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);          
  });
});

Answer 1

When you need to apply the .validate() method to more than one form , you must wrap it within a jQuery .each() .

$(".commentform form").each(function() {
    $(this).validate({
        rules: {
            antispam: {
                equalToParam: "INO"
            }
        }
    });
});

---

EDIT :

You need to initialize the plugin AFTER the form is inserted into the page. Assuming this code properly inserts the form... put your .validate() call as the last item inside...

$("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);          
  });
  $(".commentform form").validate({ // <- initialize plugin AFTER form is inserted
      // your rules & options
  });
});

---

EDIT 2 :

Include the equalToParam function someplace on your page within a DOM ready event handler.