Required attribute in jquery not working

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                  "~/Scripts/jquery.validate.min.js"));

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

$("#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",

    },