jquery validation rule properties

Hi experts,

 I have  a html page where I'm using jQuery UI DatePicker and jQuery Validation plugin.

This is my working example.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery UI Date Picker with validation</title>
            
    <!--EXTERNAL REFERENCES-->          
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>    
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>     

    <script type="text/javascript">

        $(document).ready(function () {
            //-------------------------

            //******** on Page Load Events ********

            // *** limit datepicker to only date range within fiscal year ***
            var CalendarYear = 2015;            
            // save message to a variable
            var message1 = "<p>The current Fiscal year is: " + CalendarYear + "</p>";
            // show the variable on screen
            $('.DisplayLabelYear').append(message1);

            //******** on Page Load Events ********	
            
            //******** Add DateRange DatePicker ********		            
            $("#StartDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1,
                // set min date as January 1 of CalendarYear
                minDate: new Date(Date.parse("January 1, " + CalendarYear)),
                // set max date as December 31 of CalendarYear
                maxDate: new Date(Date.parse("December 31, " + CalendarYear)),
                onClose: function (selectedDate) {
                    $("#EndDate").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#EndDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1,
                // set min date as January 1 of CalendarYear
                minDate: new Date(Date.parse("January 1, " + CalendarYear)),
                // set max date as December 31 of CalendarYear
                maxDate: new Date(Date.parse("December 31, " + CalendarYear)),
                onClose: function (selectedDate) {
                    $("#EndDate").datepicker("option", "maxDate", selectedDate);
                }
            });
            //******** Add DateRange DatePicker ********	
            
            // ***************** add validation to daterange textboxes *****************
            jQuery.validator.addMethod("isValid", function (value, element) {
                var startDate = $('#StartDate').val();
                var endDate = $('#EndDate').val();
                return Date.parse(startDate) < Date.parse(endDate);
            }, "* End date must be after start date");


            //$('#StartDate,#EndDate').datepicker()

            $('#Form1').validate({
                rules: {
                    'StartDateV': { required: true, date: true },
                    'EndDateV': { required: true, date: true, isValid: true }
                }, messages: {
                    'StartDateV': {
                        required: 'start date is required.',
                        date: 'invalid date format.'
                    },
                    'EndDateV': {
                        required: 'end date is required.',
                        date: 'invalid date format msj',
                        isValid: 'End date must be after start date'
                    }
                }
            });
            // ***************** add validation to daterange textboxes *****************

            //-------------------------
            // end of document ready function
        });
        
    </script>
    <style type="text/css">

        /*********** validation text ***********/
        label.error {
            height: 17px;
            margin-left: 10px;
            /*padding: 5px 5px 5px 5px;*/            
        }

        /* error message text style */
        .error {
            font-family: Arial;
            font-size: 12px;
            color: #ff0000;
        }
        /*********** validation text ***********/
   
    </style>
</head>
<body>
    <br /><br /><div class="DisplayLabelYear"></div>
    <br /><br />

    <form id="Form1" action="">
        <br /><br /><br /><br />
        <input type="text" id="StartDate" name="StartDateV" style="color: #4080BF; font: bold 12px verdana; padding: 0 2px 3px 2px;" />
        <input type="text" id="EndDate" name="EndDateV" style="color: #4080BF; font: bold 12px verdana; padding: 0 2px 3px 2px;" />
        <br />
        <input type="submit" />        
    </form>
</body>
</html>

Open in new window


So if you run that html page in browser you get something like this. The validation and date picker work just fine.:
on run of page
I need to add one validation rule.
Right now, if type a date  (instead of using the date picker) outside of the range of the Current Calendar Year.
The validation doesn't catch that as shown here:

validation doesnt catch when I type a date outside the current calendar year
If you look at my javascript code, I'm hard coding a variable called CalendarYear to be 2015.

So then my datepicker uses that variable to only allow a user to select dates that fall between january 1, 2015 and december 31, 2015.

In my validation I currently have a rule that doesn't let a user use the date picker pick a to date that is before a from date.
In my validation I also have both a start and end date as required.

One thing I noticed about my example is that although the date picker works good and doesnt let user select a date outside the current CalendarYear date range. I noticed a user doesn't have to use the date picker to enter a date.
I could actually just type/edit the date using the keyboard instead.

So thus. if I use a keyboard to type a  date range outside of my calendar year the validation doesnt catch that.

Anyone know the syntax for a custom jquery validation rule that will display play a validation message when a user types a date outside the calendar year?

I saw this example, but that just confused me more.

https://gist.github.com/cbumgard/4742703
LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prakash SamariyaIT ProfessionalCommented:
hello, your code is working fine with the edit/type date using keyboard.

I just change couple of lines to fill your requirement to validate range for current years :)

// ***************** add validation to daterange textboxes *****************
            jQuery.validator.addMethod("isValid", function (value, element) {
                var startDate = $('#StartDate').val();
                var endDate = $('#EndDate').val();
				var maxDate = new Date(Date.parse("December 31, " + CalendarYear));
                return (Date.parse(startDate) < Date.parse(endDate) && Date.parse(endDate)<=maxDate);
            }, "* End date must be after start date");


            //$('#StartDate,#EndDate').datepicker()

            $('#Form1').validate({
                rules: {
                    'StartDateV': { required: true, date: true },
                    'EndDateV': { required: true, date: true, isValid: true }
                }, messages: {
                    'StartDateV': {
                        required: 'start date is required.',
                        date: 'invalid date format.'
                    },
                    'EndDateV': {
                        required: 'end date is required.',
                        date: 'invalid date format msj',
                        isValid: 'End date must be after start date or date must be from current year!'
                    }
                }
            });

Open in new window

See Image below
Capture.JPG

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.