Question

I’ve got a simple text entry dialog working with jQT overlays — click a link, an overlay opens with the form, fill out the form, hit submit, and the form gets processed. I’m now trying to add validation to the form, but the validation never happens. If I disable the overlay on the link and let the form open in a separate window, validation works properly, so I’m relatively sure I’ve got the basic validation stuff set up properly. This no-overlay version is effectively what’s happening in http://flowplayer.org/tools/demos/validator/index.html — a page containing a form is loaded, the validation gets set up, and the validation code runs on form submit.

The problem with the overlay version, I think, is that the validation isn’t getting set up properly, most likely because the form isn’t getting found. The overlay form doesn’t exist until the link is clicked, so the call to validator() can’t be in the main page containing the link. I’ve tried tacking a SCRIPT tag containing the validator() call onto the end of the form code when it gets created, but that doesn’t work. Nor does calling validator() on the appropriate ID from inside the jQuery code that sets up the overlay form. In all cases, I’m not seeing any javascript errors showing up in the console. Arggh.

I would think this is a common usage of jQT forms and validation, but I just can’t figure out what’s going on here (or not going on here). Any advice? Thanks!

Answer 1

You should be able to just tap into the onLoad event in the overlay:

$("#dialog").overlay({
    load: true,
    onLoad: function() {
        $("#form").validator();
    },
    onBeforeClose: function() {
        $("#form").data("validator").reset();
    }
});

Edit: Added onBeforeClose handler to reset the form validation upon closing the overlay.

Additionally, make sure the z-index CSS property for errors is above the z-index of the overlay.

However, I’m not sure why you wouldn’t be able to place the call to validator() outside of the overlay setup code.

The overlay form doesn’t exist until
the link is clicked, so the call to
validator() can’t be in the main page
containing the link

This isn’t quite right: If you inspect your HTML with FireBug you’ll see that the overlay elements are just hidden, and will get shown and CSS will get applied to the div to make it look like a modal dialog. The form should always exist in the DOM.

Check out a working example here: http://jsfiddle.net/andrewwhitaker/SYPSG/