客户端表单验证不适用于MVC中的模态对话框

Question

我正在更改创建表单以成为模式对话框和jquery Unobtrusive验证停止工作,不知道如何解决它.

Index.cshtml有一个触发模式对话框的链接.

<a href="#" id="createCustomer">Create</a>
@section scripts{
<script type="text/javascript">
$('#createCustomer').on('click', function () {
        $.get('/Customer/Create', function (data) {
            $('#modalContainer').html(data);
            $('#myModal').modal({});
        });
    });

Create.cshtml是局部视图.

@model Demo.Web.Models.CustomerVm
@using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")        
}

在控制器上有一个actionmethod,它返回创建表单的局部视图.

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

查看模态

public class CustomerVm
{
    [Required]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }        
}

在我把它变成一个模态对话框之前......一切正常,但现在我不知道如何修复它.如何使用对话框进行验证？显然,我不想在客户端脚本上重写验证规则..我想让它从视图模型中运行..谢谢.

Answer 1

因为页面加载时表单没有添加到页面中,所以不引人注意的验证将不会将其提取.有两种方法可以解决这个问题.

1. 在初始加载期间在页面上包含表单.这将导致表单被识别并进行验证.您可以将部分视图放在隐藏的div中.然后你的JavaScript将只显示模态对话框.
2. 将表单添加到页面后,使用不显眼的验证手动注册表单.就像是$.validator.unobtrusive.parse("#id-of-the-form");

Answer 2

如果要动态加载对话框,只需在包含元素的change事件中注册不显眼的验证:

$('#modal-container').change(
    function() {
        $.validator.unobtrusive.parse("#your-form-id");
});