CODEWITHSUNDEEP
jqueryjquery-validatemodal-dialog
Ortal
Ortal

Reputation: 343

Using Jquery Validate with a Modal Window

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 :)

Upvotes: 1

Views: 8519

Answers (2)

Karel
Karel

Reputation: 2212

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.

Upvotes: 3

mcgrailm
mcgrailm

Reputation: 17640

looks like you have an extra closing form tag in your html here is a demo

also this line

var jQuery = jQuery.noConflict();

is incorrect you don't need to set it to a var just do the 

jQuery.noConflict();

I don't understand this

$Z('#ContactMeLink').fancyZoom();

what is $Z is this jQuery still ?

Upvotes: 0

Related Questions