jQuery 验证插件组 : Error message shows for last invalid field instead of first invalid field in the group

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'
        }
    });
});