Click here to Skip to main content
15,505,917 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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",

    },
Posted
Updated 3-Sep-22 5:28am
Comments
Member 15627495 26-Aug-22 2:26am    
hello !

which line or js pattern contains the error ?

did you use the code tools in your browser ? ( console log )


----------------

https://api.jquery.com/

do you try with .attr() function ?

I see a 'space' missing at the line :
...find('.help-block--here--.form-error')

-------------------------------------
why don't you use Html 5 input features options ?,
they avoid lot of 'filtering' methods to validate your forms.
Manojkumar-dll 26-Aug-22 2:30am    
jQuery.Deferred exception: $(...).validate is not a function TypeError: $(...).validate is not a function
at HTMLDocument.<anonymous> (http://localhost:49487/Report/Report:273:30)
at e (http://localhost:49487/Scripts/jquery.min.js:2:30038)
at t (http://localhost:49487/Scripts/jquery.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).validate is not a function
at HTMLDocument.<anonymous> (Report:273:30)
at e (jquery.min.js:2:30038)
at t (jquery.min.js:2:30340)


These are the errors coming in console log


and please refer the HTML5 input features

thank you

1 solution

You only shared a portion of your HTML, so let me ask: did you remember to reference the script in your page?
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900