Question

=============================================== ========================

更新

问题是由前一个开发人员编写的一些自定义代码引起的，这些代码改变了表单的提交方式（代码动态地将同步模式表单提交到Ajax调用而不考虑验证）。不幸的是，由于它将自身注入特定页面的方式，因此很难检测到。我修改了代码，问题似乎已经解决了。

=============================================== ==========================

我有一个模板，它是模态对话框的一部分。验证在各个字段上运行（我可以看到错误消息），并且调用$("#theForm").valid()会返回false，但表单仍然会被提交。

但是，如果我通过单击按钮将内容加载为简单的部分视图而不是动态模式对话框，则一切正常。如果出现验证错误，则不会提交表单。

我已经尝试在显示对话框时删除/添加验证然后重新解析，但它仍然不起作用：

<script type="text/javascript">
    $('#myModal').on('shown.bs.modal', function () {
        alert("Yes, this code does run when the dialog is displayed");
        var form = $("#createUserForm")
            .removeData("validator")
            .removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("#createUserForm");
    });
</script>

在web.config文件中启用验证。

我错过了什么？

控制器：

public class TestController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult IsRefNumberAvailable(int? refNo, int? userId)
    {
        // Simulate a long call
        System.Threading.Thread.Sleep(500);
        return Json(false, JsonRequestBehavior.AllowGet);
    }

    public ActionResult CreateUser(TestModel model)
    {
        return Json(false);
    }

    public ActionResult Create()
    {
        return PartialView("_CreateUser");
    }
}

型号：

public class TestModel
{
    public int UserId { get; set;}

    [Display(Name = "Ref. No")]
    [Remote("IsRefNumberAvailable",
        "Test",
        AdditionalFields = "UserId",
        ErrorMessage = "This Ref number already exists.",
        HttpMethod = "GET"
    )]
    public int? RefNo { get; set; }

    public TestModel() { }

}

索引视图：

@Scripts.Render("~/bundles/jqueryval")

<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

<div class="panel panel-primary">

    <div class="panel-body">
        <p>
            <div class="row">

            @*Loading the content as a Modal form doesn't work*@
            @Html.ActionLink("Create New", "Create", "Test", null, new { data_modal = "", id = "btnCreate", @class = "btn btn-small btn-primary" })


            @*But loading it as a Partial View does*@
            @*@Html.Partial("_CreateUser")*@
            </div>
        </p>
    </div>
</div>

表格/部分查看：

@model Example.Web.Models.TestModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Create User</h4>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $.validator.unobtrusive.parse($("#createUserForm"));
    });
</script>

@using (Html.BeginForm("CreateUser", "Test", FormMethod.Post, new { id = "createUserForm" }))
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        <div class="form-horizontal">
            <br />
            <div class="form-group">
                @Html.LabelFor(model => model.RefNo, htmlAttributes: new { @class = "col-sm-2 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(model => model.RefNo, new { @class = "form-control", @placeholder = "Ref No" })
                    @Html.ValidationMessageFor(model => model.RefNo, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-9">@Html.TextBox("text", null)</div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-success" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

}

Answer 1

这是一场疯狂的追逐。正如我的更新中所述，之前的开发人员对与BootStrap + jQuery Validation不兼容的代码进行了更改。我将在此处留下此回复，但应该关闭此问题。

不引人注意的验证与Bootstrap模态对话框无法正常工作

1 个答案: