动态文件输入上的jQuery验证

Question

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

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

<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>

Answer 1

我相信您遇到的错误是由于jQuery Validate的其他方法文件未包含在页面中而导致的。 该文件是验证文件上传所必需的。

可以从以下位置下载它： https : //cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js

下面的示例：

 //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; }); $("#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" } }); } $("#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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script> <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>