[jQuery] Re: [validate] Group validation error highlighting

Wed, 21 Jan 2009 14:24:51 -0800 

I don't have the page live anywhere but below is the test file I'm
using. After loading the page, the behavior is seen when I:

1) submit the page with the default loaded data. Both 'endDate' and
'endTime' fields are highlighted as expected

2) move to 'endDate' field and adjust the date to '1/21/2009'.
'endDate' field loses the error highlight right away but it remains on
'endTime' until I either bring focus back to 'endTime' field or submit
the form again. I was expecting the 'endTime' to lose the error
highlight at the same time 'endDate' loses it.

jquery version: 1.2.6
jquery.validate version: 1.5.1

--- test.html -----
<html>
<head>

<link rel=StyleSheet HREF="style.css" TYPE="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.validate_1.5.1.js"></
script>
<script type="text/javascript" src="datehelper.js"></script>

<script type="text/javascript">
$(document).ready(function() {
        $("#endTime").focus();

        $.validator.addMethod('dateTimeRange', function (data)
        {
                // console.log("dateTimeRange validation, data: " + data);
                var startDateTime = new Date();
                var endDateTime = new Date();

                // convertToDate returns a Date object for a given date & time
string value
                startDateTime.convertToDate($("#startDate").val(), $
("#startTime").val())
                endDateTime.convertToDate($("#endDate").val(), 
$("#endTime").val())

                var result = (endDateTime.getTime() > startDateTime.getTime());
                // console.log("dateTimeRange result: " + result);

                return result;
        }, 'End date and time must be later than start date and time');

        var validator = $("#sampleForm").validate({
                          debug: true,
                groups: {
                    start: "startDate startTime",
                    end: "endDate endTime"
                },
                messages: {
                    startTime: {
                        required: "Enter start time",
                    },
                    startDate: {
                        required: "Enter start date",
                        date: "Enter a valid date"
                    },
                    endTime: {
                        required: "Enter end time",
                    },
                    endDate: {
                        required: "Enter end date",
                        date: "Enter a valid date"
                    },
                },

                submitHandler: function(form)
                {
                    // console.log("submit handler - do nothing for now");
                }
            });
   });
</script>

</head>
<body>

<form id="sampleForm" method="POST" action="">
        <div class="columntitle">
            <label for="startTime">Start Time</label>

       <input type='text' name='startTime' id="startTime"
class="required" size="8" maxlength="8"
              tabindex="4"
              value="11:59 pm"/>

            <label for="startDate">Start Date</label>
            <input type='text' name='startDate' id='startDate'
class="required date" size="10" maxlength="10"
                   tabindex="5"
                   value="1/20/2009"/>
        </div>

        <div class="columntitle">
            <label for='endTime'>End Time</label>
            <input type='text' name='endTime' id="endTime" class="required
dateTimeRange" size="8" maxlength="8"
                   tabindex="6"
                   value="11:00 am"/>

            <label for="endDate">End Date</label>
            <input type='text' name='endDate' id='endDate' class="required
date dateTimeRange" size="10" maxlength="10"
                   tabindex="7"
                   value="1/20/2009"/>
        </div>

        <input class="submit" type="submit" id="submitBtn" tabIndex="13"
value="Submit"/>
</form>

</body>
</html>

datehelper.js referenced in the script file is as follows:

//
// Date helpers to convert string to date object
//
Date.prototype.convertToDate = function (startDate, startTime)
{
    // recognizes time as either 1pm, 1 pm, or 1:00 pm (from
regexlib.com)
    var regexp = /^([0-9]|[0-1][0-9]):([0-5][0-9])\s{0,1}(AM|PM|am|pm|
aM|Am|pM|Pm{2,2})$|^([0-9]|[1][0-9])\s{0,1}(AM|PM|am|pm|aM|Am|pM|Pm
{2,2})$/i;
    var parsedTime = startTime.match(new RegExp(regexp));

    if (!parsedTime)
        return;

    var hour = null;
    var minute = "00";
    var meridian = null;

    if (parsedTime[1])
    {
         hour = parsedTime[1];
         minute = parsedTime[2];
         meridian = parsedTime[3];
    }
    else
    {
        hour = parsedTime[4];
        meridian = parsedTime[5];
    }

    var parsedDateTime = new Date();
    var extractedTime = hour + ":" + minute + " " + meridian;

    if (startDate.length < 1)
    {
        startDate = this.getCorrectMonth(parsedDateTime) + "/" +
parsedDateTime.getDate() + "/" + this.getCorrectYear(parsedDateTime);
    }

    var startDateTime = startDate + " " + extractedTime;
    var millisec = Date.parse(startDateTime)

    if (millisec > 0)
    {
        parsedDateTime.setTime(millisec);

        this.setTime(millisec);
    }
}

Date.prototype.getCorrectYear = function (theDate)
{
    var x = theDate.getYear();
    var y = x % 100;
    y += (y < 38) ? 2000 : 1900;
    return y;
}

Date.prototype.getCorrectMonth = function (theDate)
{
    var x = theDate.getMonth();
    return x + 1;
}

Reply via email to