element（）在jquery ui accordion内进行验证时触发stackoverflow错误

我有一个表单，它通过使用jQueryUIAccordion小部件分几个部分显示。我正在尝试创建验证反馈，以便如果其中一个accordion选项卡包含任何无效的输入，则该选项卡将高亮显示（与输入字段一样）。这对于我的大多数选项卡都很容易，因为它们每个选项卡只有一个输入字段。不过，我有一个选项卡，下面有两个输入字段。以下是我试图解决这个问题的方法：

//validation rules for new story form   
var storyValidator = $("form#new_story").bind("invalid-form.validate", function() {
            $("#story_create_warning").html("Your form contains " + storyValidator.numberOfInvalids() + " errors, see details below.");
        }).validate({
    ignore: [],  //so to perform validation on elements that have display:none
    errorClass: 'validationError',
    errorContainer: $("#story_create_warning"),

    highlight: function(element, errorClass) {
         $(element).addClass(errorClass);
         $(element).parents(".accord_contents").prev()
                   .addClass(errorClass);
    },

    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        //because the story_contents accordion tab has more than one input on which to validate, 
        //only remove that tabs highlighting if all elements under the tab are valid
        if ($(element).hasClass("story_contents")) {
            var contentsArray = $(".story_contents");
            var length = contentsArray.length;
            for (var i=0; i<length; i++){
                if (!storyValidator.element(contentsArray[i])) { //don't remove tab highlight if even one element in the tab doesn't validate
                    return
                }
            }
        };
        $(element).parents(".accord_contents").prev()
                            .removeClass(errorClass);
    },
    errorElement: "em",
    rules: {
        "story[title]": {
            required: true,
            minlength: 5,
            maxlength: 49
        },
        "story[posts_attributes][0][contents]": {
            required: true,
            minlength: 5,
            maxlength: 399              
        },  
        "story[posts_attributes][0][photo]": {
            accept: "jpeg|jpg|png|gif|JPEG|JPG|PNG|GIF"             
        }
    },
    messages: { [my messaging]},
    errorPlacement: function(error, element) {
            error.insertAfter( element.parent("div") );
    }
});

//新故事表单的验证规则
var storyValidator=$（“form#new_story”）.bind（“无效的form.validate”，function（））{
$（“#story_create_warning”）.html（“您的表单包含“+storyValidator.numberOfInvalids（）+”错误，请参见下面的详细信息。”）；
}).验证({
忽略：[]，//以便对显示为“无”的元素执行验证
errorClass:“validationError”，
errorContainer:$（“#故事_创建_警告”），
突出显示：函数（元素，errorClass）{
$（元素）.addClass（错误类）；
$（元素）.parents（“.accord_contents”）.prev（）
.addClass（errorClass）；
},
取消高亮显示：函数（元素，errorClass）{
$（元素）.removeClass（错误类）；
//因为故事内容手风琴选项卡有多个要验证的输入，
//仅当选项卡下的所有元素都有效时，才删除突出显示的选项卡
if（$（元素）.hasClass（“故事内容”））{
var contentsArray=$（“.story_contents”）；
var length=contentsArray.length；
对于（var i=0；i您的问题与手风琴无关。即使禁用手风琴，您仍然存在问题：

但是，您的jQuery验证初始化完全错误

var storyValidator = $("form#new_story").bind("invalid-form.validate", function() {
        $("#story_create_warning").html("Your form contains " + storyValidator.numberOfInvalids() + " errors, see details below.");
    }).validate({ ... });

.validate（）
只能附加到
表单
元素…而不能链接到其他任何内容

正确初始化插件，如下所示：

$("form#new_story").validate({ ... });

演示：
首先，感谢@Sparky花了这么多时间来帮助我。正如他所指出的，我的代码太冗长了，清除代码可能很困难

但是，在web上仍然有很多人像我一样初始化Validate对象的例子，比如和。所以，我不认为这是我的问题。此外，本文还展示了一个使用
高亮显示
和
取消高亮显示
来满足类似需求的例子。因此，我认为保留我的
高亮显示/取消高亮显示覆盖是最好的选择。那么，我的<代码>取消高亮度
覆盖有什么问题

半夜，我突然意识到为什么我遇到了
堆栈溢出
错误。在我的
取消高亮
方法中，我使用了
验证.element（）
method。该方法在刚刚验证过的元素上触发了新的验证。该验证尝试通过，然后在同一元素上触发
unhighlight
，然后该元素再次递归尝试验证该元素。此意外循环导致
堆栈溢出
错误

解决方案是不使用
元素（）
方法，而是查看上一次验证生成的
invalidResults
对象，尝试查看我需要检查的两个元素中是否有一个继续无效。如果其中任何一个元素被测试为无效，则我知道在父选项卡上保持高亮显示。显示解决方案n在工作中。
很好地理解了这不是手风琴问题。不过，我不太确定初始化是否是问题所在。如果我将初始化更改为您建议的值，那么我将无法在unhighlight方法中引用验证对象。因此，您的小提琴看起来正在工作，但实际上它在fo中抛出了一个错误r循环：
Uncaught ReferenceError:storyValidator未定义
。因此，它永远不会到达
storyValidator.element（contentsArray[i]）
方法。@chuckw，
var storyValidator=$（“form#new_story”）。验证（{…}；
也可以接受。（我的回答是为了指出问题的唯一主要原因；我相信您可以从这里开始解决问题。）感谢您帮助我解决这个问题。我应该更清楚地表达我的最后一点意见。我确实使用了
var storyValidator=$（“form#new_story”）。验证（{…}）
。并且，随着
storyValidator
变量的初始化，执行再次传递到for循环，其中
storyValidator.element（contentsArray[i]）
触发溢出错误，就像它在移除链接之前一样。你的小提琴似乎可以工作，但实际上它从未到达
元素
方法。还有其他想法吗，或者我真的是傻瓜吗？@chuckw，让我们在这里备份并简化事情。暂时忘记手风琴。准确解释你在尝试什么与该方法有关。我有一种预感，事情比它们需要的要复杂得多。我相信你对我的代码过于冗长的说法是正确的。通常我不会触摸
高亮显示
和
取消高亮显示
方法。我只会让验证器完成它的工作。但是，在这种情况下，我想关闭
e的高亮显示仅当出现在以下
div
中的
输入
和
文本区域
都通过验证时，才删除。如果任一元素未通过验证，则我希望继续突出显示
元素。
$("form#new_story").validate({ ... });