CODEWITHSUNDEEP
javascriptasp.netasp.net-mvcvalidationtwitter-bootstrap
jmazur
jmazur

Reputation: 135

ASP.NET MVC validation not working on bootstrap modal

I can't get the bootstrap modal and asp.net mvc validation start working together. I've got a complex form with some validation displayed in bootstrap modal. Unfortunetely when I hit the submit button the validation doesn't work at all.

The form uses standard asp.net mvc validation. Below there is a part of it just to get the idea of how it is build:

@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>
(...)

Here is 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">Zapisz</a>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>
</div>

And some javascript that I hope to get the validation working:

        $('#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 line if ($('#contact-add-popup').valid()) returns always true. How can I get the modal and validation to work?

Upvotes: 2

Views: 9004

Answers (3)

bgS
bgS

Reputation: 257

Add this in the base view, load modal and enable client side validation.

@section scripts {

  @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

  @* The normal bootstrap behavior is to only grab the content
     for the modal once, if you need to pull in different partial
     views then the data on the modal will have to be cleared. *@

  <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

  <script type="text/javascript">
    $(function () {
      $('#modal-container').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var url = button.attr("href");
        var modal = $(this);
        //enable client side validation after page is loaded
        modal.find('.modal-content').load(url, function () {
          $('#registration_form').removeData("validator");
          $('#registration_form').removeData("unobtrusiveValidation");
          $.validator.unobtrusive.parse('#registration_form');
        });
      });
    });
  </script>
}

Upvotes: 0

jmazur
jmazur

Reputation: 135

After some research I found that javascript validation script files were missing - so the client side validation was not working at all. After including these files everything works fine.

Thanks for all answers.

Upvotes: 3

Fals
Fals

Reputation: 6839

You should try this way:

var form = $("#contact-add-popup")
        .removeData("validator")
        .removeData("unobtrusiveValidation");

$.validator.unobtrusive.parse(form);

Stackoverflow: unobtrusive validation not working with dynamic content

Upvotes: 3

Related Questions