How to validate last date should greater than start date using jquery validator

I am modifying an existing project, where I want to validate the start date(From) and end date(To) using jquery. The requirement is that End date(To) cannot be less than the Start date(from). Below is my html code and I add the jquery code I’ve written. But the date is not validated and it doesn’t display any error message. Once I click the submit button it submit successfully without any error. I really appreciate if some one can help me to resolve this.I tried this so many times, but all are failed. Really appreciate your help Thanks in advance.

<div class="form-group">
                            <label for="" class="col-sm-2 control-label">Valid From<span class="star"> * </span></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control datepicker" name="valid_from[]" id="valid_from" required="required">
                            </div>
                            <label for="" class="col-sm-2 control-label"> To <span class="star"> * </span></label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control datepicker" name="valid_to[]" id="valid_to" required="required">
                            </div>
                        </div>

var validator = $( "#add_cetificate").validate({
        rules: {
            valid_to[]: {
                greaterThan: "#valid_from"
            },
        }
    });


    $.validator.addMethod('greaterThan', function(value, element) {

            var dateFrom = $("#valid_from").val();
            var dateTo = $('#valid_to').val();

            return dateTo > dateFrom;

});

<pre>$('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        });

I really appreciate if some one can help me to resolve this.I tried this so many times, but all are failed. Really appreciate your help Thanks in advance.