ASP.NET MVC validation not working on bootstrap modal

Question

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?

Give an Id to your form an then use the validate function calling for the form Id instead of the modal div. — Fals
– Fals, Commented Nov 11, 2013 at 15:45

Community · Accepted Answer · 2017-05-23 12:08:48Z

3

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Nov 11, 2013 at 17:48

Fals

6,8394 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jmazur Over a year ago

As you may see above I do the same onShown event.

jmazur Over a year ago

Just placed your code in the document ready event but still no effect.

Chandler Zwolle Over a year ago

Thanks man! I missed this in the posters information.. I'm familiar with all sorts of validation issues, and for some reason one modal was having specific problems. This solved it!

jmazur · Accepted Answer · 2013-11-17 21:15:30Z

3

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.

answered Nov 17, 2013 at 21:15

jmazur

1351 gold badge4 silver badges12 bronze badges

1 Comment

manuelmejiaio Over a year ago

the script is @Scripts.Render("~/bundles/jqueryval")

Meyer · Accepted Answer · 2016-12-28 13:17:03Z

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>
}

Collectives™ on Stack Overflow

ASP.NET MVC validation not working on bootstrap modal

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related