Jquery Validation plugin and Colorbox

Question

Does anyone know the best way to get the Jquery Validation plugin to run when submitting a form that has been loaded dynamically into a Jquery Colorbox modal window?

Answer 1

Add the validation set up to the colorbox callback. That way the color box has been loaded and the form exists before you attempt to set up validation for it.

 $('selector').colorbox({...options...}, function() {
     $('form',this).validate( {...options...} );
 });

Answer 2

@tvanfosson: that helps immensely! I just started with colorbox and the validation plugin and googled how to get this to work. Love stackoverflow :)

Answer 3

I was playing around with this and found a better solution (at least for myself).

$('selector').colorbox( {options, onComplete:function(){$('selector').validate({} });

Visually I can see when the lightbox is finished loading, it'll attach this function to the lightbox. It's the same as what tvanfosson posted, but I like mine for readability purposes.

Answer 4

I can't get it to work. The colorbox closes before the form is validated (in FF).

How can I avoid this?

My code in the first file (which opens a colorbox) is:

    <script type="text/javascript">
        $(document).ready(function()
            {
            $("a.box").colorbox();
            });

    </script>

This simply opens a file which consists of a form, which should be validated by jQuery validate. The content of the form should be validated, and the validation JS is in the (external) file.

The code is something like:

<script type="text/javascript">$(document).ready(function() 

            { 
                $("#form").validate(); 
            }); 

</script>