jQuery validation plugin and Colorbox

I am opening up both a registration form and a login form in a modal window using Colorbox

Unfortunately, the jQuery validate plug in doesn't work anymore. I did a search and found someone a question with the answer I needed here at Stack Overflow. I'm not really well versed with JavaScript yet so I had a bit of a problem implementing the solution.

I tried interpreting the solutions on my code but couldn't figure it ou开发者_Python百科t. My code is as follows:

$(document).ready(function(){
    $('.popup').colorbox();
    $('#register form').validate({
        rules: {
            username: {
                required: true,
            },
            email: {
                required: true,
                email: true
            },
            password: {
                minlength: 4,
                required: true
            },
            password2: {
                equalTo: "#password"
            }
        },
        success: function(label) {
            label.text('OK!').addClass('valid');
        }
    });
    $('#login form').validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            }
        }
    })

; });

Can somebody please clarify how I can implement the solution a bit? Thank you.

I did some goggling my self and I found this solution:

1. Make sure that your form has a unique ID.

2. After you load your Async or replace content in the page, you have to call this JQuery Plugin method:

   $.validator.unobtrusive.addValidation("#formID");

This will remove existing validation attributes and assign new once in the specified form, or if you change "#formID" to "form" it will do that for all forms in the page.

Make sure you add this code to the page script:

// **************************** JQUERY PLUGIN **************************
// required for Unobtrusive JQuery Validation for Asynchronous data load
// reference: http://www.mfranc.com/2011/07/04/unobtrusive-validation-in-partial-views/
// *********************************************************************
(function ($) {
    $.validator.unobtrusive.addValidation = function (selector) {
    //get the relevant form
    var form = $(selector);
    // delete validator in case someone called form.validate()
    $(form).removeData("validator");
    $.validator.unobtrusive.parse(form);
    };
})(jQuery);
// *********************************************************************

Original solution with explanation can be found here: http://www.mfranc.com/2011/07/04/unobtrusive-validation-in-partial-views/

This is my implementation when using JQuery Validation plugin and Colorbox. What I'm doing is that I compile the errors first then display it once on Colorbox.

var error_list = '';

// submit button
jQuery("#continuebtn").click(function() {
    error_list = '';
    jQuery('#orderPageForm').attr('action', '/submitquote.html');
    jQuery("#orderPageForm").submit();
});

jQuery(document).ready(function(){
    // validate form
    jQuery("#orderPageForm").validate ({
        rules: {
            width: { required: true, number: true, min: 1, max: 999 },  
            height: { required: true, number: true, min: 1, max: 999 },  
            folded_width: { required: true, number: true },
            folded_height: { required: true, number: true },
            stock: "required",
            color: "required",
            folding: "required",
            quantity: { required: true, digit: true, min: 1, max: 100000 },
            turnaround: "required"
        },

        messages: {  
            width: {
                required: "Width is required.", 
                number: "Width value is not a number.",
                min: "Minimum value for width is 1.",
                max: "Maximum value for width is 999."
            },
            height: {
                required: "Height is required", 
                number:"Height value is not a number.",
                min: "Minimum value for height is 1.",
                max: "Maximum value for height is 999."
            },
            folded_width: {
                required: "Folded Width is required", 
                number:"Value is not a number."
            },
            folded_height: {
                required: "Folded Height is required", 
                number:"Value is not a number."
            },
            stock: "Paper Type is required",
            color: "Color is required",
            folding: "Folding Type is required",
            quantity: {
                required: "Quantity is required", 
                number:"Quantity value is not a number.",
                min: "Minimum value for quantity is 1.",
                max: "Maximum value for quantity is 100000."
            },
            turnaround: "Turnaround is required"
        },

        errorPlacement: function(error, element) {
            error_list += error.html() + '<br />';
            jQuery("#error_popup").html(error_list);
            parent.jQuery.colorbox({width:"400px", inline:true, href:"#error_popup"});
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

Nevermind. I figured it out. Looks like I was missing a curly bracket! The code came out to:

$(document).ready(function(){
$('.colorbox').colorbox({onComplete:function(){
$('#register form').validate({
    rules: {
        username: {
            required: true,
        },
        email: {
            required: true,
            email: true
        },
        password: {
            minlength: 4,
            required: true
        },
        password2: {
            equalTo: "#password"
        }
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
$('#login form').validate({
    rules: {
        username: {
            required: true
        },
        password: {
            required: true
        }
    }
});
}});

});