Question

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

以下是代码：

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

理想情况下，当点击提交按钮时，我想要播放以下场景：

两个字段都是空的：“名字是必需的”
填写姓氏，姓氏为空：“姓氏必填”
填写姓氏，名字为空：“名字是必需的”

任何人都知道如何做到这一点？

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

如果有人可以帮助解决这些问题，那就太棒了。

谢谢！

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

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

1 个答案: