Using Jquery Validate with a Modal Window

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

could I please see your html ? also where is the modal code ? — mcgrailm
– mcgrailm, Commented Jul 27, 2011 at 2:11

Karel · Accepted Answer · 2012-01-04 18:30:36Z

3

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.

answered Jan 4, 2012 at 18:30

Karel

2,2221 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter O. Over a year ago

Andy Mull's comment: "Karel's answer is 100% correct; put the Form tags outside the modal's container tags <form><div>Modal Content, including form</div></form> If the form is inside the div, the selector returns NULL. If the div is inside the form, it works as expected."

mcgrailm · Accepted Answer · 2011-07-27 03:25:13Z

0

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 ?

answered Jul 27, 2011 at 3:25

mcgrailm

17.7k22 gold badges86 silver badges131 bronze badges

3 Comments

Ortal Over a year ago

the no conflict tags are used since I am using different libraries ... If there is a better way please do let me know. I have the proper closing tags, it must have not translated well in stack overflow. here is the proper fiddle: jsfiddle.net/HH3Hh . Again, once I take the form out of the modal window it works just fine.

mcgrailm Over a year ago

is the modal dialog created using another library ? can you include the dialog in your fiddle ?

Ortal Over a year ago

here you go, i finally signed up for fiddle and loaded in the libraries. jsfiddle.net/Ortal/TxgYA

Collectives™ on Stack Overflow

Using Jquery Validate with a Modal Window

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related