in my datepicker i have mentioned as required in jquery but it's not showing as required field in the output
what mistake have i done
also added all the jquery validate .js files in script
in bundle config :
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.min.js"));
What I have tried:
<div class="card-body">
<form action="" id="searchForm" name="searchForm">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="txtFromDate" class="col-sm-12 control-label">From Date</label>
<div class="col-sm-10">
<div class="input-group date" id="datepicker">
<input id="txtFromDate" name="txtFromDate" type="text" class="form-control date-input" readonly="readonly" required="required" />
<label class="input-group-btn" for="txtFromDate">
<span class="input-group-text bg-white d-block">
class="fa-regular fa-calendar">
</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="txtToDate" class="col-sm-12 control-label">To Date</label>
<div class="col-sm-10">
<div class="input-group date" id="datepicker">
<input id="txtToDate" name="txtToDate" type="text" class="form-control date-input" readonly="readonly" />
<label class="input-group-btn" for="txtToDate">
<span class="input-group-text bg-white d-block">
^__i class="fa-regular fa-calendar">
</span>
</label>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$("#searchForm").validate({
errorClass: "error-class",
validClass: "valid-class",
errorElement: 'div',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
onError: function () {
$('.input-group.error-class').find('.help-block.form-error').each(function () {
$(this).closest('.form-group').addClass('error-class').append($(this));
});
},
rules: {
txtFromDate: "required",
txtToDate: "required"
},
messages: {
txtFromDate: "From Date Is Required",
txtToDate: "From Date Is Required",
},