Javascript 动态文件输入的Jquery验证

我使用的是Jquery验证，我有一个表单，它允许用户提交任何可能有用的额外文档。如果他们需要上传多个额外的文档，那么他们可以单击一个按钮，该按钮将使用Jquery添加一个新的文件输入框。创建新文件输入时，我需要添加验证规则

我尝试使用以下函数动态创建新文件输入的名称，并向其添加验证规则。它给出以下错误-“未捕获的TypeError:无法读取未定义的属性“设置”

新应用程序-2
上载其他文档（pdf、jpg和png）

添加另一个文档

你想注册吗

对
不
//定义模板
var template=$（'#sections.section:first'）.clone（）；
//定义计数器
var SectionScont=1；
//添加新节
$（“#添加其他文档”）。单击（函数（）{
//增量
sectionScont++；
//循环通过每个输入
var section=template.clone（）.find（':input'）.each（function（）{
//设置id以存储更新的节号
var newId=this.name+sectionScont；
//标签更新
$（this.prev（）.attr（'for'，newId））；
//更新id
$（this.attr（'id'，newId）；
this.name=newId；
})(完)
//注入新段
.附于（“#节”）；
重新验证（）；
返回false；
});
$（“#appli-2”）。验证({
规则：{
其他文件：{
要求：正确，
接受：“pdf、jpg、png”
}
},
信息：{
其他文件：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
} 
}      
});       
函数重新验证（）{
var name=“#其他_文件”；
name+=sectionScont；
console.log（名称）；
$（名称）.规则（“添加”，{
要求：正确，
接受：“pdf、jpg、png”，
信息：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
}
});
} 
$（“#appli-2”）。验证({
规则：{
其他文件：{
要求：正确，
接受：“pdf、jpg、png”
}
},
信息：{
其他文件：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
} 
}      
});       
函数重新验证（）{
var name=“#其他_文件”；
name+=sectionScont；
console.log（名称）；
$（名称）.规则（“添加”，{
要求：正确，
接受：“pdf、jpg、png”，
信息：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
}
});
} 

我相信您遇到的错误是由于jQuery Validate的附加方法文件未包含在页面中。验证文件上载时需要此文件

它可以从以下位置加载：

下面是一个示例：

//定义模板
var template=$（'#sections.section:first'）.clone（）；
//定义计数器
var SectionScont=1；
//添加新节
$（“#添加其他文档”）。单击（函数（）{
//增量
sectionScont++；
//循环通过每个输入
var section=template.clone（）.find（':input'）.each（function（）{
//设置id以存储更新的节号
var newId=this.name+sectionScont；
//标签更新
$（this.prev（）.attr（'for'，newId））；
//更新id
$（this.attr（'id'，newId）；
this.name=newId；
})(完)
//注入新段
.附于（“#节”）；
重新验证（）；
返回false；
});
$（“#appli-2”）。验证({
规则：{
其他文件：{
要求：正确，
接受：“pdf、jpg、png”
}
},
信息：{
其他文件：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
} 
}      
});       
函数重新验证（）{
var name=“#其他_文件”；
name+=sectionScont；
console.log（名称）；
$（名称）.规则（“添加”，{
要求：正确，
接受：“pdf、jpg、png”，
信息：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
}
});
} 
$（“#appli-2”）。验证({
规则：{
其他文件：{
要求：正确，
接受：“pdf、jpg、png”
}
},
信息：{
其他文件：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
} 
}      
});       
函数重新验证（）{
var name=“#其他_文件”；
name+=sectionScont；
console.log（名称）；
$（名称）.规则（“添加”，{
要求：正确，
接受：“pdf、jpg、png”，
信息：{
必需：“选择图像”，
接受：“仅允许图像类型jpg/png/pdf”
}
});
}

上载其他文档（pdf、jpg和png）

添加另一个文档

你想注册吗

对
不

请给我完整的代码好吗？@Luke.T你也可以分享相应的HTML吗？该网站是一个wordpress模板，我提取了

<h1>New Application - 2</h1>

<form method="post" id="appli-2">
    <div class="container">
        <div id="sections">
            <div class="section">
                <div class="row" id="otherDoc">
                    <div class="col-xs-12">
                        <label class="required" for="other_doc1">Upload other documents(pdf, jpg png)</label>
                        <input type="file" class="file other_doc" name="other_doc" id="other_doc">
                    </div>
                </div>
            </div>
        </div>
        <hr>

        <button type="button" id="addOtherDoc" class="btn btn-default">Add another document</button>
        <p>&nbsp;</p>

        <label style="text-align: center;">Do you wish to register ?</label></br>
        <div="row">
            <div class="col-sm-6">
                <button id="yes" class="btn btn-default btn_nav">YES</button>
            </div>
            <div class="col-sm-6">
                <button id="no" class="btn btn-default btn_nav">NO</button>
            </div>
        </div>
    </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    //define template
    var template = $('#sections .section:first').clone();

    //define counter
    var sectionsCount = 1;

    //add new section
    $("#addOtherDoc").click(function() {
        //increment
        sectionsCount++;

        //loop through each input
        var section = template.clone().find(':input').each(function(){

            //set id to store the updated section number
            var newId = this.name + sectionsCount;

            //update for label
            $(this).prev().attr('for', newId);

            //update id
            $(this).attr('id', newId);
            this.name = newId;

        }).end()

        //inject new section
        .appendTo('#sections');
        reValidate();
        return false;
    });
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<script>
    $("#appli-2").validate({
        rules: {  
            other_doc: {
                required: true,
                accept: "pdf,jpg,png"
            }
        },
        messages: {
            other_doc: {
                required: "Select Image",
                accept: "Only image type jpg/png/pdf is allowed"
            } 
        }      
    });       

function reValidate() {
    var name = "#other_doc";
    name += sectionsCount;

    console.log(name);
    $(name).rules("add", { 
        required: true,  
        accept: "pdf,jpg,png",
        messages: {
            required: "Select Image",
            accept: "Only image type jpg/png/pdf is allowed"
        }
    });
} 
</script>

<script>
    $("#appli-2").validate({
        rules: {  
            other_doc: {
                required: true,
                accept: "pdf,jpg,png"
            }
        },
        messages: {
            other_doc: {
                required: "Select Image",
                accept: "Only image type jpg/png/pdf is allowed"
            } 
        }      
    });       

function reValidate() {
    var name = "#other_doc";
    name += sectionsCount;

    console.log(name);
    $(name).rules("add", { 
        required: true,  
        accept: "pdf,jpg,png",
        messages: {
            required: "Select Image",
            accept: "Only image type jpg/png/pdf is allowed"
        }
    });
} 
</script>