Enable validation in Bootstrap remote modal form

Question

How can I get validation to work on a Bootstrap "remote" modal that contains a form?

jQuery validation does not automatically apply to forms that are loaded in a "remote" Bootstrap modal.

Answer 1

Since the form does not exist in the DOM we need to have the the validator reparse the newly added content. Fortunately Bootstrap has an event that fires after after modals are shown.

$(document).on("shown.bs.modal", function (e) {
    $.validator.unobtrusive.parse(document);
});

Note to use "shown" and not "show" for the event name.

You may want to limit the call to only remote modals by adding a class to the modal div like "remote-modal-form" if you have a mix of local and remote modals on a page.

$(".remote-modal-form").on("shown.bs.modal", function (e) {
    $.validator.unobtrusive.parse($(".remote-modal-form"));
});