0

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

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

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

ETC...

我的验证码是这样的

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

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

如何分组验证动态字段？


使用 sparkies 帮助和我的新 errorPlacement 代码进行编辑。
这应该可以实现我的目标。

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

1 回答 1

2

字段名称必须是唯一的，此插件才能正常运行。

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

});

演示：http: //jsfiddle.net/xCY4T/

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

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

或者一次对于许多新字段，使用“开始于”选择器和.each...

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

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

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

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

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

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

这种方法非常简单，但我看不出有办法覆盖默认消息。

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

于 2013-04-02T14:47:50.477 回答