javascript - ASP.NET MVC validation not working on bootstrap modal - Stack Overflow

admin管理员组

文章数量:1313331

I can't get the bootstrap modal and asp mvc validation start working together. I've got a plex 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 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 pany-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?

I can't get the bootstrap modal and asp mvc validation start working together. I've got a plex 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 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 pany-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?

• javascript
• asp
• asp-mvc
• validation
• twitter-bootstrap

Share Improve this question Follow edited Nov 11, 2013 at 10:57 jmazur asked Nov 11, 2013 at 10:52 jmazurjmazur 13511 gold badge44 silver badges1212 bronze badges 6

• Try to parse the form directly instead of the modal! – Fals Commented Nov 11, 2013 at 10:54
• 2 What is the extension Html.BuildForm() ? – Andrei Commented Nov 11, 2013 at 11:10
• @AndreiMikhalevich it is Build.Mvc – jmazur Commented Nov 11, 2013 at 11:46
• @Fals What do you mean by directly? – jmazur Commented Nov 11, 2013 at 14:33
• Give an Id to your form an then use the validate function calling for the form Id instead of the modal div. – Fals Commented Nov 11, 2013 at 15:45

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 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

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.

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

本文标签： javascriptASPNET MVC validation not working on bootstrap modalStack Overflow