I'm struggling to make the bootstrap modal and asp.net mvc validation work together seamlessly. My form is quite complex with validation displayed in a bootstrap modal. However, when I press the submit button, the validation doesn't seem to be functioning at all.
The form utilizes standard asp.net mvc validation. Here is a snippet of how it is structured:
@using (Html.BuildForm().AddClass("form-horizontal").Id("contact-add-popup").EncType(FormEncType.MultipartData).Begin()) {
@Html.AntiForgeryToken()
@Html.Partial("_Alerts")
<div class="control-group">
<div class="control-group company-field">
@Html.BuildLabelFor(m => m.Name).AddClass("control-label")
<div class="controls">
@Html.BuildTextBoxFor(m => m.Name).AddClass("input-xxlarge")
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
(...)
Next, here is the structure of my modal:
<div id="createContactModal" class="modal hide fade modal-contact" tabindex="-1" role="dialog" aria-labelledby="createContactModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-header">
<h4 class="modal-label" id="createContactModalLabel">Add contact</h4>
</div>
<div class="modal-body">
@Html.Partial("_CreateContact", new ContactCreateModel())
</div>
<div class="modal-footer">
<a href="javascript:$('#contact-add-popup').submit();" class="btn btn-primary">Save</a>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
Additionally, I have included some javascript to enable validation within the modal:
$('#createContactModal').on('shown', function () {
$("#contact-add-popup").removeData("validator");
$("#contact-add-popup").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#contact-add-popup");
});
$('#contact-add-popup').on('submit', function(e){
e.preventDefault();
$.validator.unobtrusive.parse($("#contact-add-popup"));
if ($('#contact-add-popup').valid()){
alert('AJAX');
}
});
The issue lies in the line if ($('#contact-add-popup').valid()), as it always returns true. What steps can I take to ensure that the modal and validation cooperate effectively?