Question

我正在生成我的表单区域，如果任何生成的字段为空，我想要显示自定义错误消息。

我生成的代码看起来像这样

<input type="text" id="Field1" name="Generated" />
<input type="text" id="Field2" name="Generated" />

等...

我的验证码就像这样

$('#myform').validate({
    rules: {
        Generated: {
            required:true
        }
    },
    messages: {
        Generated: { required : "Custom message." }
    },
    groups: {
        GeneratedGroup: "Generated"
    },
    errorPlacement: function(error, element){
        if (element.attr("name") == "Generated"){
            $('#bottomOfGeneratedSectionDiv').append(error);
        } else {
            error.insertAfter(element);
        }
    }
});

如果所有生成的字段都为空，则验证失败并显示错误消息如果填写了任何一个字段，则验证通过并且表单提交，这是非预期的行为。

如何分组验证动态字段？

修改
有火花帮助和我的新errorPlacement代码这应该实现我的目标。

    errorPlacement: function(error, element){
        if (element.attr("name").indexOf("Generated") >= 0){
            $('#bottomOfGeneratedSectionDiv').empty();
            $('#bottomOfGeneratedSectionDiv').append(error);
        } else {
            error.insertAfter(element);
        }
    }

Answer 1

字段名称必须才能使此插件正常运行。

<强> HTML ：

<input type="text" id="Field1" name="Generated1" />
<input type="text" id="Field2" name="Generated2" />

<强>的jQuery ：

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            Generated1: {
                required:true
            },
            Generated2: {
                required:true
            }
        },
        messages: {
            Generated1: { 
                 required: "Custom message."
            },
            Generated2: { 
                 required: "Custom message."
            }
        },
        groups: {
            GeneratedGroup: "Generated1 Generated2"
        }
    });

});

DEMO：http://jsfiddle.net/xCY4T/

要为动态添加的字段添加规则，您可以在创建字段后立即使用the rules('add') method。（AFAIK，没有动态添加groups选项的方法）

$('[name="Generated2"]').rules('add', {
    required:true,
    messages: {
        required: "Custom message."
    }
});

或者对于许多新字段，请使用“starts with”选择器和.each ...

$('[name^="Generated"]').each(function() {
    $(this).rules('add', {
        required:true,
        messages: {
            required: "Custom message."
        }
    });
});

此方法的简单演示：http://jsfiddle.net/xCY4T/1/

另一种方法是使用the addClassRules method 创建 class。

$.validator.addClassRules("GeneratedRule", {
    required: true
});

然后，当您创建新字段时，请确保它们每个都包含class="GeneratedRule"以及唯一的name。

<input type="text" name="Generated1" class="GeneratedRule" />
<input type="text" name="Generated2" class="GeneratedRule" />

这种方法非常简单，但我认为无法覆盖默认消息。

简单演示：http://jsfiddle.net/xCY4T/2/

如何分组验证动态字段？

1 个答案: