调试失败的jQuery验证addMethod

时间:2014-05-27 19:53:02

标签: javascript jquery jquery-validate

我有一个页面,几乎每个点击都由delegate()处理。 http://itsneworleans.com/shows/midnight-menu-plus-1/blogs/after-midnight?preview=1

我像这样设置jQuery验证

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

如果我使用

签入控制台
$.validator.methods['equalToParam']

我回来了

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

所以看起来不错。

验证适用于表单提交但是equalToParam方法没有效果。只有"要求"事件就发生了。

字段HTML

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

我哪里错了?

编辑以下是整个表单代码(从PHP脚本生成并通过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>
<? } ?>

再次编辑以及点击授权代码..​​....

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

编辑以下是将表单填充到“回复帖子”链接所在空间的代码:

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

1 个答案:

答案 0 :(得分:0)

当您需要将.validate()方法应用于多个form时,必须将其包装在jQuery .each()中。

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

修改

您需要在将表单插入页面后初始化插件。假设此代码正确插入表单...将您的.validate()调用作为最后一项...

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

编辑2

在DOM就绪事件处理程序中的页面上包含equalToParam函数。