Question

I have a modal window that works great, and a jquery form that validates great, but the two dont work together. I have tried different combinations of click/live events, and nothing seems to work. As soon as I attach the modal windows ID to the form container, it deosnt work. Here is my code. I am so frustrated, I really hope you can help me! Thank you SO MUCH in advance. Ive been at this for several hours with no progress.

var jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery.validator.methods.NotEqual = function(value, element, param) {
        return value != param;
    };  
jQuery('#submit').live('click',function() {
    jQuery('form').submit();
});


jQuery('form').live("submit", function(event) {
    jQuery("#contacts").validate({
        errorPlacement: function(error, element) {},
        errorContainer: "#PIErrorBox",
        rules: {
            name: {
                required: true,
                NotEqual: 'Name'
            },
            email: {
                required: true,
                email: true,
                NotEqual: 'Email'
            },
            notes: {
                required: true,
                NotEqual: 'How Can I Help?'
            }
        },
        submitHandler: function(form) {
            jQuery(".button").hide();
            var loader = jQuery('<img src="images/loading.gif" alt="loading..." class="loading">').insertAfter(".button");
            var param = jQuery(form).serialize();

            jQuery.ajax({
                type: "POST",
                url: "include/inc_sendmail.php",
                data: param,
                success: function() {
                    jQuery('#contacts').hide();
                    jQuery('#thankyou').show();
                }
            });
            return false;
        }
    });
});

});

Im having a really hard time getting the html to post, all I get is empty divs. here is the fiddle, which shows the html: http://jsfiddle.net/4kNVv/

Using the Jquery Validate Library from http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Modal Window Code

Modal JS: http://ortalonline.com/js/fancyzoom.js

called via $Z(‘#ContactMeLink’).fancyZoom();

Thank you so much for your help 🙂

Answer 1

A bit late but maybe this can help someone else.

This is probably due to the fact that the model moves the elements to be validated at the bottom of the body, after the form. The validator searches them IN the form and does not find them.

The trick is not to move the elements in the modal area out of the form tags.