调试失败jQuery validate addMethod

Debugging failing jQuery validate addMethod

本文关键字：addMethod validate jQuery 失败 调试      更新时间：2023-09-26

我有一个几乎每次点击都由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']

I get back 

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

看起来不错。

验证对表单提交有效，但是equalToParam方法不起作用。只有"必需的"事件才会发生。

字段HTML是

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

我哪里错了?

EDIT这是完整的表单代码(从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>
<? } ?>

EDIT AGAIN这里是点击委托代码…

$("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下面是将表单填充到Reply to Post链接所在空间的代码:

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

当您需要将.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 :

将equalToParam函数包含在页面的某个DOM就绪事件处理程序中

相关文章：