Question

我一直在尝试为我的网站提供一个很好的验证解决方案，但我遇到了不同选项的问题。我已经仔细阅读了文档并查看了示例，但我仍然遇到问题。

我的表格在桌子上。我希望每一行都有它自己的错误行，它通常是隐藏的，但是会在适当的时候为每一行显示。

以下选项隐藏并显示错误行正常，但每个错误行中显示的错误消息是每个错误消息的整个串联：

$('#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。我在这里做错了什么？

非常感谢

Answer 1

如果您查看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();
});

希望这有帮助！

Answer 2

确保使用这些行中没有前导点的类名：

errorContainer: 'errorRow',
errorLabelContainer: 'errorRow appValueColumn',

jQuery validate plugin - showErrors选项 - errorContainer不会隐藏/显示

2 个答案: