javascript - 在同名字段之间移动 jQuery 验证错误标签

Question

我正在使用 jQuery Validate 插件来验证表中具有相同名称的多个字段。 Using this answer to another question ，验证器很好地验证了所有字段，但有一个问题:错误消息始终附加到第一个无效字段。

这是 .validate 函数规则上的错误位置。

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

如this codepen我写的演示，只有第一个同名的输入字段才会收到错误消息

填写字段后，消息保留在该输入字段旁边，而错误出现在另一个字段中

即使所有输入错误均已修复，然后用户又犯了另一个错误，该消息仍保留在该框中。

如何让验证器在每个错误上添加一条消息，如下图所示？

Answer 1

此处代码:Code Changes

rules: {
            'name1': {
                required: true
            },
            'name2': {
                required: true
            },
            'name3': {
                required: true
            }
        },

        // Messages for form validation
        messages: {
            'name1': {
                required: 'Please enter a value'
            },
            'name2': {
                required: 'Please enter a value'
            },
            'name3': {
                required: 'Please enter a value'
            }

每个输入元素的必填字段应该是唯一的。