1

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.

Kramer00
  • 1,167
  • 3
  • 12
  • 34
  • maybe you just need to trigger the validation after the partial loads instead of referencing the all the scripts? when the form loads just do something like `$("#commentForm").validate();` (that is if you are using jquery-validate) – hajpoj Dec 16 '12 at 23:43
  • http://stackoverflow.com/questions/4406291/jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements/4719293#4719293 – Robin van der Knaap Dec 16 '12 at 23:44
  • That makes sense, I should have realised it would be due to the jquery unobstrusive validation and not having bound, at the point of page creation, to the dynamic content which is being pulled into the modal body. This gives me a lot to go on. Will confirm my solution shortly. – Kramer00 Dec 17 '12 at 09:21

1 Answers1

3

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.

Kramer00
  • 1,167
  • 3
  • 12
  • 34
  • Spend atleast 1 hr for such a stupid error .Why cant validators include all these functionalities :( ?? – ksg Sep 30 '15 at 07:27