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

Posted 2023-02-22

【中文标题】ASP.NET MVC 验证不适用于引导模式

【英文标题】：ASP.NET MVC validation not working on bootstrap modal

【发布时间】：2013-11-23 03:28:52

【问题描述】：

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

表单使用标准的 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 ($('#contact-add-popup').valid()) 行返回始终为真。如何让模态和验证工作？

【问题讨论】：

尝试直接解析form而不是modal！

Html.BuildForm() 的扩展是什么？

@AndreiMikhalevich 它是Build.Mvc

@Fals 直接是什么意思？

给你的表单一个 Id 然后使用验证函数调用表单 Id 而不是模态 div。

【参考方案1】：

你应该试试这个方法：

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

$.validator.unobtrusive.parse(form);

***: unobtrusive validation not working with dynamic content

【讨论】：

正如你在上面看到的，我做了同样的 onShown 事件。

刚刚将您的代码放入文档就绪事件中，但仍然没有效果。

谢谢你！我在海报信息中错过了这一点。我熟悉各种验证问题，并且由于某种原因，一种模式存在特定问题。这解决了它！

【参考方案2】：

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

感谢所有回答。

【讨论】：

脚本是@Scripts.Render("~/bundles/jqueryval")

【参考方案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>