麻烦与jQuery的

Question

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

这里结束我的屏幕拍摄

我的问题我想jQuery的使用的validate（），但我有点卡住我想使用class= "input-daterange"作为字段，并根据需要输入fRange和sRange。我如何做到这一点，如果我使用fRange和sRange作为领域，错误按摩显示混乱。任何想法？？

UPDATE： 对不起，不是不清楚我的问题 我使用jQuery验证这样的

$('#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帮助。对于Mayank Pandeyz，你没有清楚地看到我的问题，就像我说的那样，没有帮助，即使你说换了换。仍然没有工作。

Answer 1

在这两个文本框中提供的名称属性与它的值，如：

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

并把验证码这些像：

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

Working Fiddle