How to validate dynamic datepicker in jquery .Validation()?

Question

I am trying to insert dynamic datepicker in the database. Everything works fine! except jquery .validation. Done a validation rule if the input fields are empty a required message should be displayed has "please select a date" for ex: if I add three dynamic rows, while kept it in empty and pressed submit button, it shows validation message as "Please select a date" Now move to the three rows!

a) In first row I have picked a date, then I pressed submit button, It shows "Please select a date" in remaining input fields

b) Then next I have selected a date in a second input field and press the submit button, In here what needs to happen is third input field shows the validation message, but the datepicker automatically show in the second input field. I don't know why is automatically showing datepicker in the second input field while its already date has picked...

<div class="form-body pal">
    <div class="col-md-12 col-md-offset-10">
        <div class="form-group">
            <button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button>    //class name used for onclick to add row
        </div>
    </div>
</div>  
<div class="form-body pal">
    <div class="col-md-12">
        <div class="form-group">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover add_row" id="details">
                    <thead>
                        <tr>
                            <th >Date</th>
                            <th >Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    // Append table with add row form on add new button click
    $(".add_details_button").click(function(){    //button click to add row
        var index = $("#details").index();    
        var randaom_val = Math.floor(Math.random() * 100000000)    //Generating unique key for the added row
        var row_index = index+randaom_val;
        var row = '<tr>' +
            '<td><input class="datepicker_recurring_start" name="date[]" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date"  class="form-control"/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>'
        $("#details").append(row);
        $(".datepicker_recurring_start").datepicker({
        autoclose: true
    })
});
    // Delete row on delete button click
    $(document).on("click", ".delete", function() {
        $(this).parents("tr").remove();
    });
});

//Jquery Validation
$(function() {
    $("#add_date_form").validate( {
        // Rules for form validation
        rules: {
            'date[]': {
                required: true,
            },
        },
        // Messages for form validation
        messages: {
            'date[]': {
                required: 'Select a valid visit date'
            },
        },
        // Do not change code below
        errorPlacement: function(error, element) {
        error.insertAfter(element);
        },
        submitHandler: function(form) {
            var details_row_count = $('#details tr').length;
            if (details_row_count<=1) {
                var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...';
                $.notific8(msg,{ theme: 'ruby',life: 500 });
                return false;
            }
            $('#submit_date').attr("disabled", true);
            form.submit();                
        }
    });
});

Answer 1

 $(document).ready(function() { var count=0; // Append table with add row form on add new button click $(".add_details_button").click(function(){ //button click to add row var index = $("#details").index(); var randaom_val = Math.floor(Math.random() * 100000000) //Generating unique key for the added row var row_index = index+randaom_val; var row = '<tr>' + '<td><input class="datepicker_recurring_start" name="dateField['+count+']" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date" class="form-control" required/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>'; count=count+1; $("#details").append(row); $(".datepicker_recurring_start").datepicker({ autoclose: true }); }); // Delete row on delete button click $(document).on("click", ".delete", function() { $(this).parents("tr").remove(); }); }); //Jquery Validation $(function() { $("#add_date_form").validate(); $("#add_date_form").validate( { // Rules for form validation // Messages for form validation messages: { 'dateField[]': { required: 'Select a valid visit date' }, }, // Do not change code below errorPlacement: function(error, element) { error.insertAfter(element); }, submitHandler: function(form) { var details_row_count = $('#details tr').length; if (details_row_count<=1) { var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...'; $.notific8(msg,{ theme: 'ruby',life: 500 }); return false; } $('#submit_date').attr("disabled", true); form.submit(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <form name="add_date_form" id="add_date_form" method="POST" autocomplete="off" class="form-separated"> <div class="form-body pal"> <div class="col-md-12 col-md-offset-10"> <div class="form-group"> <button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button> </div> </div> </div> <div class="form-body pal"> <div class="col-md-12"> <div class="form-group"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover add_row" id="details"> <thead> <tr> <th >Date</th> <th >Delete</th> </tr> </thead> </table> </div> </div> </div> </div> <div class="form-body pal"> <div class="col-md-10 col-md-offset-10"> <div class="form-group"> <button type="submit" name="submit_date" id="submit_date" class="btn btn-primary submit"><i class="fa fa-save"></i> Submit</button> </div> </div> </div> </form> 

If you create inputs with same name won't work

<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />

Instead of this

 <input type="text" name="date[0]" />
    <input type="text" name="date[1]" />
    <input type="text" name="date[2]" />
    <input type="text" name="date[3]" />

Just add indexes for each inputs

and in validator write rules for dateField[] or include required attribute in input tag.

I hope this will help you.