Tuesday, April 19, 2011

The Odd Encounter with jQuery, jQuery UI and Input Validation

I recently had a web app project that in the beginning simply had to have a form that will submit something to some recipient as a particular format. We won't delve into what format it is but with my brief encounter with the modus operandi of the orchestrated effort of jQuery and jQuery UI on input validation.

One of the ongoing and painful criticism against free and open source software I have to admit is the lack of reliable documentation (on the flip-coin side, paying for proprietary product documentation that's unreliable is swindling). In this case, following the examples I found in jQuery documentation or jQuery UI documentation proved that results may not be as expected, thus, I have documented here what worked for my project and saved my reputation (not to mention my sanity).

To be sure we're working with the latest, I decided we better use the online resource since the project I was working on will always be online, I settled for Google CDN (Code Distribution Network) being always up-to-date and universally accessible; this is where I first encountered ambiguity and got confused. On jQuery's example, to invoke Google CDN is like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

but in Google CDN itself, it's like below, note that it's HTTPS:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Same with jQuery UI, I can invoke either:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

or with HTTPS as documented in Google:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

To further add to confusion, the jQuery input validation plugin as seen from jQuery documentation is:

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

But it doesn't work on my project, change the source file to what's pointed to here as illustrated below and the magic works:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

I think the message is that jQuery development is more of trial and error when you're just a starter. I hope there's a more unified or updated and consistent repository of libraries and related plugins. I like jQuery and plan to use it across all the projects I'll work with in the future, I just hope the experience would be smoother for starters and those like me who forgets much everything about a library, knowing what I know now may be irrelevant in the future due to changes and updates to be done later to the library life cycle.


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.