jQuery 将六个输入字段作为一组进行验证

Question

我正在尝试实现 6 个表单字段，允许用户键入发送到他们电子邮件的 6 位数代码。

这6个字段都是必填项，如果其中任何一个未填写，错误消息将出现在右侧。

在我的代码中，我遇到了以下问题

1) ALL NOT填写时，出现错误信息。这是正确的。

2)只要填其中一个，错误信息就消失了。

2a) 只有当我点击“提交”按钮时，错误信息才会短暂出现。一旦我释放点击，错误消息就消失了。我不确定是不是因为错误消息被覆盖了。

是否可以编写一个方法来检查只要其中一个字段未填写，就会显示错误消息？

$(document).ready(function(){

    $("#verification_form").validate({
        groups: {
            inputGroup: "num1 num2 num3 num4 num5 num6"        
        },                  
        rules: {
            Name: {
                required: true,
                maxlength:50
            },
            Email: {
                required: true,
                email:true,
                maxlength:50
            },
            num1: {
                required:true
            },
            num2: {
                required:true                                           
            },
            num3: {
                required:true
            },
            num4: {
                //required: "#divVerifyEmail:visible",
                required:true                                           
            },
            num5: {
                required:true
            },
            num6: {
                required:true                                           
            }                                                                                                       
        },


        highlight: function(element, errorClass) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        errorPlacement: function (error, element) {
             $(element).closest('.form-group').find('.error-msg').text(error.text());
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success')
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }   
})      

Answer 1

groups 选项只是将所有消息合并为一个。如果所有六个字段都有自己的 required 规则，那么当满足一个字段时消息将被清除，然后当另一个字段不满足时消息将返回，依此类推，打开/关闭/等你在田野里走来走去。

此选项不适用于具有不同消息的多个字段。它旨在用于像 require_from_group 这样的复杂规则，这些规则总是会同时在多个字段上放置相同的消息。 groups 选项按照预期的方式工作，但这不是您想要的。

您可能想尝试使用 require_from_group 规则。

$("#verification_form").validate({
    groups: {
        inputGroup: "num1 num2 num3 num4 num5 num6"
    },
    rules: {
        ....
        num1: {
            require_from_group: [6, $("[name^=num]")]
        },
        num2: {
            require_from_group: [6, $("[name^=num]")]
        },
        num3: {
            require_from_group: [6, $("[name^=num]")]
        },
        num4: {
            require_from_group: [6, $("[name^=num]")]
        },
        num5: {
            require_from_group: [6, $("[name^=num]")]
        },
        num6: {
            require_from_group: [6, $("[name^=num]")]
        }
    },
    ...

或者将此规则同时分配给所有六个字段的更短方法...

$("[name^=num]").each(function() {
    $(this).rules('add',{
        require_from_group: [6, $("[name^=num]")],
        messages: {
            require_from_group: "These 6 fields are required"
        }
    });
});

演示:jsfiddle.net/xbwzt7p9/