My HTML code looks like this:
<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>
</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>
This is where my screen shot ends: https://i.sstatic.net/PebVw.png
My question is about using validate() in jQuery. I am trying to use class= "input-daterange" as a field, with the inputs fRange and sRange being required. However, when I use fRange and sRange as fields, the error message gets messy. Any ideas on how to achieve this?
UPDATE: Apologies for not clarifying my question earlier. I am using jQuery validate as shown below:
$('#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');
}
});
The issue I'm facing is that the error message does not show under my input as intended, but appears differently on my screen. Here is the image of the error: https://i.sstatic.net/T82vx.png
I would like the error message to display under each input.
UPDATE: I have decided to use sweet alert instead. Thank you for the help. And to Mayank Pandeyz, please make sure to understand my question clearly before providing assistance. Changing the error placement did not resolve the issue.