Question

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 out. 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.

Answer 1

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/