jQuery验证插件 - showErrors选项 - errorContainer不能取消隐藏/显示

5
我一直在尝试为我的网站找到一个好的验证解决方案,但是我在不同的选项上遇到了问题。我已经仔细阅读了文档并查看了示例,但仍然存在问题。
我的表单在一个表格中。我希望每一行都有自己的错误行,通常情况下这些行是隐藏的,但会根据需要显示。
以下选项可以很好地隐藏和显示错误行,但是每个错误行中显示的错误消息是所有错误消息的整个串联:
$('#myform').validate({
    rules: {
        firstName: "required",
        lastName: "required"
    },
    messages: {
        firstName: "Enter your first name.",
        lastName: "Enter your last name."
    },
    errorContainer: '.errorRow',
    errorLabelContainer: '.errorRow.appValueColumn',
    errorPlacement: function(error, element) {
        error.appendTo( element.parent().next() );
    }
});

我尝试使用如下的showErrors选项:

  $('#myform').validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
        messages: {
            firstName: "Enter your first name.",
            lastName: "Enter your last name."
        },
        errorContainer: '.errorRow',
        errorContainer: '.errorRow.appValueColumn',
        showErrors: function(errorMap, errorList) {
        $.each(errorMap, function(key, value) {
       $('#'+key).parent().next().children('.appValueColumn').html(errorMap[key]);
});

好的,现在所有的错误都被分开并显示在正确的位置,但我无法让 .errorRows 显示。我在这里做错了什么?

非常感谢。

2个回答

3

如果你查看验证插件的源代码中的showErrors方法,你会看到以下内容:

this.settings.showErrors
            ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
            : this.defaultShowErrors();

这意味着,如果您为此方法提供自定义处理程序,则不会执行默认行为。
您可以在自己的showErrors处理程序末尾调用this.defaultShowErrors(),代码将如下所示:
showErrors: function(errorMap, errorList) {
    $.each(errorMap, function(key, value) {
        $('#'+key).parent().next().children('.appValueColumn')
                  .html(errorMap[key]);
    });
    this.defaultShowErrors();
});

希望这能帮到你!

我按照你的代码应用到我的项目中,但是当我点击提交按钮时出现了错误,有时候页面会刷新。你能否请检查一下我犯了什么错误?这是fiddle链接:https://jsfiddle.net/locateganesh/we7rkrxk/1/ - Ganesh Yadav
1
看控制台,你可以看到有一个异常“Uncaught TypeError: this.defaultShowErrors is not a function”。 就像我在帖子中所说的那样,在自定义的“showErrors”处理程序的末尾应该调用this.defaultShowErrors(),但在代码示例中,它被包含在$.each()中! 发现得好;-) - Didier Ghys

0
请确保在这些行中使用类名时不要带上前导点:
errorContainer: 'errorRow',
errorLabelContainer: 'errorRow appValueColumn',

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接