Using the jQuery Validation Engine with modal & dialog plugins

This is a question I often get asked by email, and I think there is enough requests to warrant a small blog post.

All about the DOM

The validationEngine expect your form to be present on the page when you initialize the plugin, and this is where modal plugins fall short. If your using those plugins you generally want to load a new piece of html into your document using AJAX.

In that case you need to initialize the validationEngine after you loaded your modal content. Generally modal plugins have an api that let you do this. Let’s take 2 example, Colorbox and jQuey ui.

Colorbox :

jQuery UI :

That should give you a pretty good idea of what you need to do whatever the…

Working with jQuery load() function on images in Internet Explorer 8 and below

One big problem with using load() on images is that it just does not work at all on ie. Now there is a lot of solutions proposed to counter this problem, however most of them are irritating.

Why IE handle load() this way

Simple, IE already cached your image, so it does not need to load it back The 2 most know solution to this are one, adding a random string at the end of the image url, like this:

The other solution is to check the height property since if it’s not zero, the image is already loaded:

Well these 2…

Update on mobile web frameworks

Recently saw 2 developments on web mobile frameworks that really got my attention.

jQuery Mobile

First, jQuery mobile just entered Beta3. Lots of bugfixes but also one cool thing that has been baking for a while, real fixed footers and headers are available in the framework. Before that, jQuery fixed stuff was just a gimmick with the fixed bars disappearing when scrolling, now you got the real deal, well sort of. It’s unfortunately only available for ios5, meaning not a big lot of people will see it.

Android does not really support fixed positioning yet, it however supports overflow:scrolltouch. But it seems the jQ teams decided to only implement position:fixed for everybody. There is a nice video of the feature here.

Sencha Touch

Sencha kind of went off…

Organizing events with jQuery

Following the launch of BackboneFU I wanted to take the time to talk about my current setup when I am not using an MVC framework on the front-end. This will be also part of my presentation at Confoo 2011 (if I’m chosen).

The problem with handling events with jQuery is probably that jQuery itself makes it really easy to make spaghetti code, so only reading the jQuery documentation you are bound to hit a wall at some point. I’m always amazed at junior javascript developers’ code and how they always mess things up if they use jQuery.

Prob #1 Anonymous functions

When you look at the jQuery documentation for events, you would see something like this explaining bind:

It’s not because you can use anonymous function to do everything…

Introducing BackboneFU.com, the resources for Backbone.js.. maybe

Well, well, sometimes I feel that I need to start a small project just for the fun of it, this time I created backboneFU. I recently started playing with this framework and while there is a lot of resources about backbone, I feel that it’s missing a community website like railcasts for Rails.

This is why I started BackboneFU, in my wildest dreams it would become the resource for Backbone. Anyone who wants to write about backbone will be accepted on the website, so if you want to write something, or already wrote something on your blog and donate the article also on BakcbonFU, you are welcome to do so. There is a nice bio for authors on each articles.

I also added one article recently, Front-end…

Two headaches explained when you’re getting started with backbone.js

Recently I decided to dive into backbone.js. I tried to write a small project with it but I found it was hard to get into and abandoned. After seeing a presentation of it at JS-Montreal, I finally decided to give it another try and started porting a project I was working on to it.

Personally I find that backbone.js is a weird beast. It’s called an MVC framework, but there is no controller, the events system is completely different from your default PHP/Ruby MVC style and there is a notion of collections. Basically Backbone is a MRVT(Model Route Views Template), scratch that, it’s in fact a MCRVT(Model Collection Route View Template)

So if you are a front-end developer with some MVC knowledge because you are sometimes dealing with a…

Do you use script loaders?

It’s funny I have the impression that script loaders keep coming back in the news, if we go back one year and a half ago we mostly only had labJS and requireJS, these guys want to load all your scripts asynch, but now we got new kids, notably yepnope, that allows you to load scripts based on feature detection and others.. headJS, controlJS, enhanceJS, jsDefer ouch…

Script loaders are responding to a weird problem, you would think that browsers do a good job at loading script since its been doing just that for more than 10 years, but in fact not really, it could be a lot better and this is where those technologies come in.

What they do is super charge the loading speed of your scripts…

Authoring a css book and what is next

I neglected quite a bit my blog for some times now .. After 3 years of doing this I feel like I have less and less to say about web development. Well not that it happens to every blogs of course . I still have some stuff for you guys, but I feel my time doing one article a week is gone.

Confoo conference

This year I am trying to do a talk at the Confoo conference, basically it’s an introduction course at code organization with jQuery, called jQuery Spaghetti. It’s probably not for most of you guys and I know it has been done in other js conferences, but I feel like Confoo will have quite a bit of ‘hobby’ jQuery devs since it’s really a…

Handling javascript errors on production websites

Handling javascript errors as always been sort of a problem for me. Testing every combination possible in a big application is hard, and there is always a chance you will miss something.

Of course, we should always strive to make an application as bug free as possible, but users seems to always find a way to break it. You can always expect them to do something you never have think of, and this is one of the reason I created this plugin.

When a javascript error is detected, this plugin will do an ajax request to your server and then sends an email, of course you could also log it in a database. It’s certainly not a revolutionary idea, but still, I was finding the idea cool…

Introducing hooks in the jQuery form validation engine plugin

Hooks are a new feature just introduced into the engine recently. This makes it very easy to add extra behaviors on top of the current error prompts.

The hooks make the use of the jQuery custom event feature. A good example of use would be to add a mention that there is a problem at the form beginning when an error is found.

See the Demo
Download Plugin

There are currently 3 hooks implemented in the engine. One that is triggered before the validation, one after each field validation, and one, finally, with the form result.

* jqv.form.validating : Triggers when the form is submitted and before it starts the validation process
* jqv.field.result(event, field, errorFound, prompText) : Triggers when a field is validated with the result.
* jqv.form.result(event, errorFound) : Trigger when a…