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

Question

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

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

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

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

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

2a) 仅当我单击 "Submit" 按钮时才会短暂出现错误消息。一旦我释放点击，错误消息就消失了。我不确定是不是因为错误消息被覆盖了。

是否可以写一个方法来检查只要其中一个字段没有填写，然后显示错误信息？

$(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 规则，那么当一个字段满足时消息将被清除，然后当另一个字段不满足时消息将返回，依此类推，切换 on/off/etc 作为你在田间四处走动。

此选项不适用于具有不同消息的多个字段。它旨在用于像 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/

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

jQuery Validation of six input fields as a group

jquery

jquery-validate