带有选项卡和自定义错误消息的 jquery 表单验证答案

【问题标题】：jquery form validation with tabs and custom error messaging带有选项卡和自定义错误消息的 jquery 表单验证
【发布时间】：2013-02-26 00:08:45
【问题描述】：

我正在使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 进行表单验证。

我的表单被分成不同的标签。

最后一个选项卡是我的表单提交按钮所在的位置。现在验证检查似乎可以工作，但是，验证总是会返回到缺少完成的字段。

我宁愿只在提交按钮上方输出我的错误消息，告诉用户返回有问题的选项卡并填写该字段。

这是我正在使用的代码

var errcontainer = $('.errcontainer');
$("#application-submit").click(function() {
        $("#application-form").validate({
        debug: true,
        rules: {
            student_lastname: "required"
        },
        errorContainer: errcontainer,
        errorLabelContainer: $("ol", errcontainer),
        wrapper: 'li',
        meta: "validate"
    });
});

http://jsfiddle.net/F2HNh/

当我禁用选项卡时会输出错误消息，但当我启用它们时，我什么也得不到。

有什么建议吗？

谢谢。

【问题讨论】：

标签： jquery forms jquery-validate

【解决方案1】：

就像任何其他 jQuery 插件一样，您可以在 DOM 就绪时对其进行初始化。无需将.validate() 放在点击处理程序中。如果您只是希望它在单击提交按钮时测试表单的有效性，默认情况下它已经这样做了。

$(document).ready(function() {
    $("#application-form").validate({
        debug: true, // <-- this will block a real submission
        rules: {
            student_lastname: "required"
        },
        errorContainer: errcontainer, // <-- errcontainer not defined or a valid selector.
        errorLabelContainer: $("ol", errcontainer), // <-- errcontainer not defined or a valid selector.
        wrapper: 'li',
        meta: "validate"  // <-- this is not a documented option
    });
});

我不确定你对 meta: "validate" 的意图是什么...it's not a documented option。

另外，您的 errorContainer: 和 errorLabelContainer: 选项无效。 As per the documentation and examples、errorLabelContainer: 是 “由作为errorContainer 选项传递的选择器指定”。 errcontainer 不是有效的选择器，也不是已定义的变量。

与errorLabelContainer: 相同，$("ol", errcontainer) 不是有效的选择器。

正如您定义的那样，这两个选项都会导致插件失败并出现错误：http://jsfiddle.net/5JRNV/

如果您不想关注第一个无效字段，请使用focusInvalid: false 选项。

$(document).ready(function() {
    $("#application-form").validate({
        focusInvalid: false,
        rules: {
            student_lastname: "required"
        },
        // other options.
    });
});

标准演示：http://jsfiddle.net/5G5PT/

【讨论】：

谢谢 Sparky。我只关注我在小提琴中使用的核心代码。文档准备好了，我还在 JS 的其他地方声明了 errcontainer。单击事件检查的原因是还有一个“应用程序保存”按钮也可以提交表单，此时我不想进行验证。此处使用了元 jquery.bassistance.de/validate/demo/errorcontainer-demo.html - 虽然不使用选项卡时验证工作正常。
@StevenGrant，.validate()不是“检查”；这是插件的初始化例程。要进行按需检查，您可以使用.valid()。

【解决方案2】：

尝试使用空数组传入 ignore 选项

$('form').validate({
 // your other options    
 ignore:[]
});

如果错误消息在您启用选项卡之前显示在 errorLabelContainer 中，但之后未显示，则可能是因为错误位于隐藏的字段上，默认情况下未验证.

【讨论】：