Javascript jquery上的validate（）有问题

我有这样的html

<form class="form-filter" id="form-filter-excel" role="form">
            <div class="row">
                <div class="col-md-4 col-sm-5">
                    <label>Date range</label>
                    <div class="input-group input-daterange datepicker">
                        <input id="fRange" name="fRange" class="form-control input-sm" type="text">
                        <span class="input-group-addon bg-primary">to</span>
                        <input id="sRange" name="sRange" class="form-control input-sm" type="text">
                    </div>
                </div>
                <div class="col-md-2 col-sm-1">
                    <label>
                        &nbsp;
                    </label>
                    <a class="btn btn-wide btn-primary form-control" href="#" id="btnexport" ><i class="fa fa-file-excel-o"></i> Export To Excel</a>
                </div>
            </div>
        </form>

$('#form-filter-excel').validate({
            highlight: function(element) {
                $(element).closest('.form-group').prop('required',true);
            },
            unhighlight: function(element) {
                $(element).closest('.form-group').prop('required',false);
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function(error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                fRange: {
                    required: true,
                    date: true
                },
                sRange: {
                    required: true,
                    date: true
                }
            },
             messages: {
                fRange: "Please insert these input",
                sRange: "Please insert these input"
            },
        });

        $('#btnexport').click(function() {
            $('#form-filter-excel').valid();

            if($('#form-filter-excel').valid()==true)
            {
                var Fod = $('#fRange').val();
                var Tod = $('#sRange').val();

                window.open(host+"ajax/excelpoinfo?Fod=" + Fod +"&Tod=" + Fod, '_blank'); 
            } 
        });

但问题是错误信息没有显示在我的输入下，而是显示在我的屏幕上

我需要的是在我的每个输入下显示错误信息

更新：

---

我改变主意了，我用甜甜警觉，tq来帮忙。对梅亚克·潘代兹来说，你并没有像我说的那样清楚地看到我的问题，那没有帮助，甚至你说了“改变-替换”。还是不行

在两个文本框上都提供name属性及其值，如：

<form id="frmDetails" name="frmDetails">
  <input type="textbox" name="fRange">
  <input type="textbox" name="sRange">
</form>

---

非常不清楚您需要什么。清楚地解释您想要实现什么我编辑我的问题，因为很清楚，我想做错误信息显示（放置）在我的每个输入下。我的html与您的html不同，因此如果我使用的是u's code jquery，则错误信息不在此处。我正在编辑我的问题，你看到我的图像位置错误信息没有到位。检查我的小提琴，里面有两个错误信息标签，你可以把这些标签放在任何你想要错误信息的地方。你不明白我说的话，我在使用插件datepcikter，你没有看到我的代码html？？我正在使用输入组input daterange datepicker，在您的代码中，它不适用于我的代码。请从validate函数中删除错误放置部分，然后尝试我的fiddle代码，它肯定会工作

$('#frmDetails').validate({
    rules:
    {
        fRange: {
            required: true
        },
        sRange: {
            required: true
        }
    },
    messages:
    {
        fRange: {
            required: "Please select fRange"
        },
        sRange: {
            required: "Please select sRange"
        }
    }
});