使用JQuery Validate Plugin验证具有相同名称的多个表单字段

Question

我有一个动态生成的表单,其输入字段具有相同的名称(例如:"map").我没有更改字段名称或生成唯一字段名称的选项,因为表单处理程序代码(Perl/CGI)旨在处理输入值数组(在本例中@map).

如何在这种情况下使用JQuery Validate插件验证表单？具体来说,我希望提交的数组中只有一个元素具有一定的固定值.我目前正在使用自定义事件处理程序,该处理程序创建一个JSON对象,serializeArray()然后遍历它以确保满足条件.但是因为我在应用程序的其余部分使用了Validate Plugin,所以我想知道是否可以使用相同的插件来处理这样的情况.

感谢您的关注.

Answer 1

由于我无法评论@scampbell的答案,我不知道如果它的声誉点或因为线程刚刚关闭,我对他的回答有所贡献,

您可以简单地覆盖仅在需要它的页面中编辑所需的函数,而不是更改源文件jquery.validation.

一个例子是:

$.validator.prototype.checkForm = function() {
    //overriden in a specific page
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
        if (this.findByName(elements[i].name).length !== undefined && this.findByName(elements[i].name).length > 1) {
            for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                this.check(this.findByName(elements[i].name)[cnt]);
            }
        } else {
            this.check(elements[i]);
        }
    }
    return this.valid();
};

这可能不是最好的解决方案,但至少它避免编辑可在以后新版本发布时替换的源文件.您的覆盖功能可能会或可能不会中断

Answer 2

我知道的旧线程,但我遇到了它,寻找解决同样问题的方法.

这里发布了一个更优雅的解决方案:http: //web-funda.blogspot.com/2009/05/jquery-validation-for-array-of-input.html

您只需编辑jquery.validate.js并将checkForm更改为

    checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                    this.check( this.findByName( elements[i].name )[cnt] );
            }
        } else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}

Answer 3

我花了一些时间搜索并尝试不同的事情,最后我尝试了在多个领域进行验证的最简单的方法.每个字段和它的克隆共享一组每个集独有的类.我只是通过该类的输入循环并像往常一样添加了我的验证规则.我希望这可以帮助别人.

    $("#submit").click(function(){
    $("input.years").each(function(){
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Specify the years you worked"
            }
        } );            
    });

    $("input.employerName").each(function(){
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Specify the employer name"
            }
        } );            
    }); 

    $("input.employerPhone").each(function(){
        $(this).rules("add", {
            required: true,
            minlength: 10,
            messages: {
                required: "Specify the employer phone number",
                minlength: "Not long enough"
            }
        } );            
    }); 

    $("input.position").each(function(){
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Specify your position"
            }
        } );            
    });             

    $("input.referenceName").each(function(){
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Specify the reference name"
            }
        } );            
    });         

    $("input.referencePhone").each(function(){
        $(this).rules("add", {
            required: true,
            minlength: 10,
            messages: {
                required: "Specify your reference phone number",
                minlength: "Not long enough"
            }
        } );            
    });

// Now do your normal validation here, but don't assign rules/messages for the fields we just set them for





});

Answer 4

我刚刚从插件作者JörnZaefferer的邮件中了解到,验证要求字段名称除了单选按钮和复选框外是唯一的.

Answer 5

Jason 的回答可以解决问题，但我不想在我执行此操作的每个表单上添加额外的点击事件。

就我而言，我让验证插件考虑以 '[]' 结尾的名称不同，即使它们可能具有相同的字段名。为此，我在 jquery.validate.js 加载后重写了这两个内部方法。

$.validator.prototype.elements= function() {
var validator = this,
    rulesCache = {};

// select all valid inputs inside the form (no submit or reset buttons)
// workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
return $([]).add(this.currentForm.elements)
.filter(":input")
.not(":submit, :reset, :image, [disabled]")
.not( this.settings.ignore )
.filter(function() {
    !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);

    // select only the first element for each name (EXCEPT elements that end in []), and only those with rules specified
    if ( (!this.name.match(/\[\]/gi) && this.name in rulesCache) || !validator.objectLength($(this).rules()) )
        return false;

    rulesCache[this.name] = true;
    return true;
});
};


$.validator.prototype.idOrName = function(element) {

// Special edit to get fields that end with [], since there are several [] we want to disambiguate them
// Make an id on the fly if the element doesnt have one
if(element.name.match(/\[\]/gi)) {
    if(element.id){
        return element.id;
    } else {
        var unique_id = new Date().getTime();

        element.id = new Date().getTime();

        return element.id;
    }
}

return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
};