Jquery validation on dynamic file input

Question

I'm using Jquery validation and I have form which at the end allows users to submit any extra documents which may be useful. If they need to upload more than one extra document then they can click a button which will add a new file input box using Jquery. When a new file input is created I need to add a validation rule.

I'm trying to use the following function to dynamically create the name of the new file input and add a validation rule to it. It gives the following error - "Uncaught TypeError: Cannot read property 'settings' of undefined"

<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

I believe the error that you're experiencing is a result jQuery Validate's additional methods file not being included on the page. This file is required for validating file uploads.

It can be dowloaded from: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js

Example with it in place below:

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