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

Enable/Disable auto back button in jQuery Mobile framework


Hi,

Currently JQuery Mobile is still in alpha version. As they are moving towards first beta version, they do some changes from previous alpha versions.

One of the key change is, they disable auto back button by default, As they thought that many of the mobile device will have back button. But some may not have. To enable it, use the following option:

Please note that sequence of adding library does matter here.

<script src="/javascript/jquery.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.page.prototype.options.addBackBtn= true;
    });
</script>
<script src="javascript/jquery.mobile.js"></script>

innerHTML vs appendChild


Hi,

Today I was testing my code, and I found interesting stuff on innerHTML property and appendChild method.

I was trying to add new elements to the div.

First, I was creating element by calling DOM method (document.createElement()) and then I append it to my div by calling appendChild() method of the HTML div element.

But then I changed the logic by using innerHTML property of the HTML div element.

I was doing the same thing by two different way, but what is the difference?

Well try out this page, and notice the difference!

Hold on, think twice if you didn’t get the difference.

Okay! I hope that you are a good tester and found the difference that clicking on ‘Add by DOM’ button, you don’t loose the value of the input box, while clicking on ‘Add by innerHTML’ button you loose the value of input box.

Okay, so changing the innerHTML property will force  recreation of div by browser, and that’s why you loose the value if input box!

So which one is better?

I saw that people are taking lot about the speed of both the technique (check here), but my this post is just to remind the causes of changing the technique!

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.