Tag Archives: JavaScript

Added valid date validation in jQuery validator


Hi,
Recently I got lots of error on mobile page, where I cannot give a nice date picker.
I use jQuery validator for form validations, but its date validation is not validating valid date.

If you use the new Date() function with 32nd as date, then it takes next month’s date.

I came up with adding more validations in default date validation method.

(function($) {
	/*
	 * This is a date validation fix,
	 * Because earlier it was validating invalid dates like '12//2/12' or '04/31/2012'
	 */
	/*
	 * Edit 1: Added year range: 1012 is invalid year, SQL datetime range is 1/1/1753 TO 12/31/9999
	 */
	 $.validator.addMethod("date", function(value, element) {
		return this.optional(element) || (/^\d{2}([\/])\d{2}\1\d{4}$/.test(value) && !/Invalid|NaN/.test(new Date(value)) && parseInt(value.match(/^\d{2}/)) == (new Date(value).getMonth()+1) && parseInt(value.match(/\d{4}/)) > 1752);
	});
})(jQuery);

Save the above code in one js file e.g. jquery.validate.datefix.js and include it after you include jQuery validator js.

Display JavaScript object value


As you probably already know, JavaScript can be difficult to debug. One thing that has helped us out many times is this function to show all the properties of an object. This function recursively takes properties that are objects themselves and shows their properties. To see how it works, put a function call of “dumpProps(document)” in the “onclick” event of a button and you’ll see everything about the document.

This function provides a couple of advantages for debugging. First, it allows you to verify what object you are working with during your script. It also allows you to verify the properties of that object (maybe you can’t remember the property name or don’t know how to spell it). It is also good if you are working with a heirarchy of properties. For example, if you think it might be document.body.referer for the property you want, but aren’t sure, you can show all the document properties, recursively, to find out which one it is. (it’s actually document.referer).

This code uses confirm prompts so you don’t have to go all the way through all the properties once you find the one you want. Clicking cancel will stop the processing. (Note that if you click cancel while the function has been recursing, it will stop that level of recursion and you can continue on or click cancel on the parent level).

Here is the function:

    <script type="text/javascript">
        function dumpProps(obj, parent) {
            // Go through all the properties of the passed-in object
            for (var i in obj) {
                // if a parent (2nd parameter) was passed in, then use that to
                // build the message. Message includes i (the object's property name)
                // then the object's property value on a new line
                if (parent) {
                    var msg = parent + "." + i + "\n" + obj[i];
                } else {
                    var msg = i + "\n" + obj[i];
                }
                // Display the message. If the user clicks "OK", then continue. If they
                // click "CANCEL" then quit this level of recursion
                if (!confirm(msg)) {
                    return;
                }
                // If this property (i) is an object, then recursively process the object
                if (typeof obj[i] == "object") {
                    if (parent) {
                        dumpProps(obj[i], parent + "." + i);
                    } else {
                        dumpProps(obj[i], i);
                    }
                }
            }
        }
    </script>

This code should be placed in the section of your page so it can be used anywhere you need it. Note that the “parent” variable is optional and not needed for the initial call to the function. It is only used during the recursion.