jQuery 验证插件组：显示组中最后一个无效字段而不是第一个无效字段的错误消息

Question

在 jQuery 验证插件中使用组时，由于某种原因，如果两个字段都无效，它总是显示组中最后一个字段的错误消息。理想情况下，它应该显示组中第一个无效字段的错误消息。

代码如下：

<form id="form1">
    <div>
        <label>Name</label>
        <input type="text" name="firstName" id="firstName" />
        <input type="text" name="lastName" id="lastName" />
    </div>
    <div>
        <input type="submit" value="Test" />
    </div>
</form>

JS：

$(function() {
    $('#form1').validate({
        messages: {
            firstName: {
                required: 'first name is required'
            },
            lastName: {
                required: 'last name is required'
            }
        },
        rules: {
            firstName: {
                required: true
            },
            lastName: {
                required: true
            }
        },
        groups: {
            fullName: 'firstName lastName'
        }
    });
});

理想情况下，当单击提交按钮时，我希望出现以下场景：

1. 两个字段均为空：“名字为必填”
2. 名字已填写，姓氏为空：“姓氏是必需的”
3. 姓氏已填写，名字​​为空：“名字是必需的”

有人知道如何完成此操作吗？

我也在努力解决的另一件事是，如果我使用“成功”功能在用户完成每个字段时显示“有效”标签，它似乎忽略了字段分组的事实。我只想在组中的两个字段都有效时才显示“有效”消息。

如果有人可以帮助解决这两个问题，那就太好了。

谢谢！

Answer 1

试试这个

$(function() {
    $('#form1').validate({
        messages: {
            firstName: {
                required: 'first name is required'
            },
            lastName: {
                required: 'last name is required'
            }
        },
        rules: {
            firstName: {
                required: true,
                lastName: {
                    required: true
                }
            }
        },
        groups: {
            fullName: 'firstName lastName'
        }
    });
});