jQuery 验证回调函数答案

【问题标题】：jQuery Validation Callback FunctionjQuery 验证回调函数
【发布时间】：2011-06-03 08:20:50
【问题描述】：

我目前在网页的灯箱框架内有一个表单。当用户提交带有无效数据的表单时，会在表单顶部显示一个 div，其中包含表单错误列表。问题是：在出现错误 div 后，我需要某种 jQuery 验证回调来调整灯箱的大小。据我所知，jQuery 灯箱无法做到这一点。

【问题讨论】：

您是指灯箱 iframe 吗？您是使用插件还是您自己的脚本验证表单？

标签： jquery jquery-ui jquery-validate validation lightbox

【解决方案1】：

你提供无效的回调函数，你可以找到documented here，像这样

$(".selector").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            //resize code goes here
        }
    }
})

【讨论】：

我想我没有想到在 invalidHandler 函数中处理所有错误显示和放置。谢谢！
在 .validate 已经被初始化/调用之后，你将如何附加这个处理程序？

【解决方案2】：

或者，您可以使用 errorPlacement 回调函数来处理未通过验证的特定元素。例如，下面的代码使用 errorPlacement 回调将每个无效表单元素的父 div 标签的类设置为“错误”，然后在元素通过验证后删除“错误”类：

form.validate({
        rules: {
            Name: {
                required: true
            },
            Email: {
                required: true
                , regex: "^[0-9a-zA-Z.+_\-]+@{1}[0-9a-zA-Z.+_\-]+\\.+[a-zA-Z]{2,4}$"
            }
        },
        messages: {
            Name: {
                required: "Please give us your name"
            },
            Email: {
                regex: "Please enter a valid email address"
            }
        },

        errorPlacement: function(error, element) {
            element.parent().addClass("error");
        },

        success: function(element) {
            $("#" + element.attr("for")).parent().removeClass("error");
        }
    });

【讨论】：