javascript - MVC - jQuery 验证不适用于动态添加的元素

Question

我知道此类问题已经解决了很多次，但是我无法根据提供的解决方案修复我的问题。

我正在构建一个简单的图书馆应用程序。有一个功能可以添加书籍的副本，它使用 jQuery 调用 Controller 操作并返回部分 View ，然后将其动态添加到 DOM。

最后添加的动态元素是一个表单，其中包含所创建副本的附加详细信息。当 DropDownList (#AuthorBooksDropDown)(也是动态添加的)的值更改时，将触发 ajax 调用。

$('#authorBooksPlaceHolder').on('change', '#AuthorBooksDropDown', function () {

    var bookId = $(this).val();

    $.get('/Books/AddCopy_RenderDetails/' + bookId, function (data) {

        $('#bookDetailsPlaceHolder').html(data);
        $('#bookDetailsPlaceHolder').slideDown();
    });

    $.validator.unobtrusive.parse('#addCopyForm');
});

该调用调用了 AddCopy_RenderDetails 操作，根据图书 id 从数据库中获取实体，并创建填充了某些字段的新副本。

Controller 操作:

public PartialViewResult AddCopy_RenderDetails(int id)
        {
            var book = db.LibraryBooks.Find(id);

            var newCopy = new Book()
            {
                Author = book.Author,
                Title = book.Title,
                Publisher = book.Publisher,
                CollectionId = book.CollectionId,
                Collection = book.Collection
            };

            return PartialView("_AddCopy_Details", newCopy);
        }

该 View 显示需要填充的剩余字段。

@model CityLibrary.Models.Library.Book

<div class="vertical-separator"></div>

<hr />

@using (Ajax.BeginForm("AddCopy", "Books", new AjaxOptions
{
    UpdateTargetId = "bookDetailsPlaceHolder"
}, new { @id = "addCopyForm" }))
{
    @Html.AntiForgeryToken()

    @Html.HiddenFor(model => model.Author)
    @Html.HiddenFor(model => model.Title)
    @Html.HiddenFor(model => model.CollectionId)
    @Html.HiddenFor(model => model.Collection.Name)
    @Html.HiddenFor(model => model.Publisher)

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

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

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

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


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

即使我在渲染表单时调用了 $.validator.unobtrusive.parse('#addCopyForm'); (在 chrome 开发工具中检查)，验证仍然发生在服务器端每次都会触发 POST 操作，按下提交按钮。更不用说在按 Tab 键切换到下一个字段时不会显示验证错误。

验证属性存在于表单的输入中:

我还有远程验证功能，可以检查输入的 ISBN 是否已在数据库中。显然这在客户端有效，但在我的例子中根本行不通。

感谢您的时间和帮助。

编辑:

嗯，我已将以下内容添加到 View 末尾:

<script>
    $.validator.unobtrusive.parse('#addCopyForm');
</script>

而且它有效。我不知道为什么在函数上触发它没有任何作用。

Answer 1

Ajax 是异步的，并且您的 $.validator.unobtrusive.parse('#addCopyForm'); 代码行在 html 添加到 DOM 之前被调用。将其移至 success 回调内部

$.get('/Books/AddCopy_RenderDetails/' + bookId, function (data) {
    $('#bookDetailsPlaceHolder').html(data);
    $('#bookDetailsPlaceHolder').slideDown();
    $.validator.unobtrusive.parse('#addCopyForm');
});