Question

I am using twitter bootstrap modal with a remoteurl to load in a partial view; in this case for a reset password form.

I am using the MVC model binding and have set the data annotations on the model to enable the client side validation to occur in the partial view.

This however does not fire the client side validation. I get the server side validation which is fine, but for some reason when this form is within the modal it does not invoke the client side validation.

The jquery validation and bootstrap scripts are referenced in the main page which contains the modal.

I have however added the jquery and jquery validation script references to the end of the partial view, and doing this does ensure the client side validation is invoked.

Why is it necessary for these scripts to be included within the parital view which is loaded into the modal?

As it works this way I would have been happy to leave it, but doing so causes me another problem with the twitter bootstrap modal when I need to dynamically load different remoteUrls.

When the jquery scripts are referenced in the partial view too, the modal will fire the first time, but then subsequent times I get an error. I know it is the jquery references causing a problem as if
I remove them, although I don’t get the client side validation, I can open the modal multiple times without any problems.

The code I am using to invoke the modal is found from internet searches to try and get the modal to refresh the modal body for different remoteurls passed to it.

$('#mymodal').removeData('modal');
$('#mymodal').modal({ remote: self.remoteUrl, keyboard: true });

The error I then get is on firing this for the second time $(‘#mymodal’).modal is null. but it will always work the first time. As detailed above, I believe this to be because of the jquery script references in the partial view.

Does anyone have an thoughts on either of these two problems.

Answer 1

The only way I seemed to be able to get this to work in the end was when the partial view was loaded to call the following:

$('#frmName').removeData("validator");
$('#frmName').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#frmName');

This seemed to invoke the client side validation for me.