ASP.NET MVC 4 Colorbox Partial View Form Not Validating

Question

I have an ASP.NET MVC 4 application that is using unobtrusive jQuery validation for form inputs. This works fine on all normal views. When I load pages into a lightbox using Colorbox, the forms are posting back to the controller to run the validation without running any of the validation on the client side. I have user other lightbox APIs besides Colorbox without any issues.

By tinkering around, it seems like the jQuery validation is not setup against this form, which would make sense since the form is loaded after page loads (when the user clicks a link). I call validate() against the form and only the extra validation methods I wrote run, not any of the MVC validations methods (like Required or RegularExpression). Plus the form still posts back to the server even if there are form errors.

What am I missing?

Answer 1

Unobtrusive validation inits on page load and when you load partial with ajax, you need to init your form:

$.validator.unobtrusive.parse('#form_selector');

More details: jquery.validate.unobtrusive not working with dynamic injected elements