Question

我无法获得bootstrap模式和asp.net mvc验证开始协同工作。我有一个复杂的表单，在bootstrap模式中显示了一些验证。不幸的是，当我点击提交按钮时，验证根本不起作用。

表单使用标准的asp.net mvc验证。下面是其中的一部分，只是为了了解它是如何构建的：

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

这是我的模态：

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

我希望验证工作的一些javascript：

        $('#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');
            }
        });

行if（$（＆＃39;＃contact-add-popup＆＃39;）。valid（））返回true。如何使模态和验证起作用？

Answer 1

你应该这样试试：

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

$.validator.unobtrusive.parse(form);

Stackoverflow: unobtrusive validation not working with dynamic content

Answer 2

经过一番研究后，我发现javascript验证脚本文件丢失了 - 所以客户端验证根本不起作用。包含这些文件后一切正常。

感谢所有答案。

Answer 3

在基本视图中添加此项，加载模式并启用客户端验证。

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

ASP.NET MVC验证不适用于bootstrap模式

3 个答案: