javascript - Jqueryvalidate 的 .validate() 方法在 ASP Core 中不执行

Question

我正在尝试通过ajax提交表单，它工作正常，但没有验证。因此，我添加了 JQuery 验证库并将代码添加到处理程序中，如文档中所述，但它似乎没有执行

cshtml 页面:

@{
    ViewData["Title"] = "CreateProduct";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1 class="text-center">Create Product</h1>
<br>

<form method="post" id="formdata" asp-controller="Product" asp-action="UploadProduct">
    <div class="form-group">
        <p>Please provide a name for your product:</p>
        <input type="text" name="Name" required />
    </div>
    <div class="form-group">
        <p>Please provide a price for your product:</p>
        <input type="number" name="Price" required />
    </div>
    <div class="form-group">
        <p>Please provide a description for your product:</p>
        <input type="text" name="Description" required />
    </div>
</form>

<button class="btn btn-primary" id="subBtn">Upload Files</button>

@section scripts
{
    <script>
        $(function () {

            $('#subBtn').click(function (e) {
                var formData = $('#formdata').serialize();

                $('#formdata').validate({
                    debug: true,
                    submitHandler: function () {
                        $.ajax({
                            type: 'POST',
                            url: '/Product/UploadProduct',
                            data: formData,
                            success: function (e) {
                                Toastify({
                                    text: "Product submition successful!",
                                    duration: 3000,
                                    gravity: "bottom", // `top` or `bottom`
                                    position: 'right', // `left`, `center` or `right`
                                    backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)",
                                    stopOnFocus: true, // Prevents dismissing of toast on hover
                                    onClick: function () { } // Callback after click
                                }).showToast();

                                $(':input', '#formdata')
                                    .not(':button, :submit, :reset, :hidden')
                                    .val('')
                                    .prop('checked', false)
                                    .prop('selected', false);
                            }
                        }).fail(function (e) {
                            //toastr.error('Product not added');
                        });
                    }
                });
            });
        });

    </script>
}

我已经添加了对 _Layout.cshtml 的引用:

 <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
        <script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    </environment>

我想再次补充一点，逻辑是有效的，只是 validate() 方法没有执行。

Answer 1

.validate() 方法仅用于初始化表单上的插件。它不属于提交按钮的单击处理程序内部。您应该将 validate() 方法移至客户端处理程序之外，并在 submitHandler 事件内序列化数据:

<script>
    $(function () {
        $('#formdata').validate({


            submitHandler: function () {
                var formData = $('#formdata').serialize();
                alert("ad");
                $.ajax({
                    type: 'POST',
                    url: '/Product/UploadProduct',
                    data: formData,
                    success: function (e) {
                        Toastify({
                            text: "Product submition successful!",
                            duration: 3000,
                            gravity: "bottom", // `top` or `bottom`
                            position: 'right', // `left`, `center` or `right`
                            backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)",
                            stopOnFocus: true, // Prevents dismissing of toast on hover
                            onClick: function () { } // Callback after click
                        }).showToast();

                        $(':input', '#formdata')
                            .not(':button, :submit, :reset, :hidden')
                            .val('')
                            .prop('checked', false)
                            .prop('selected', false);
                    }
                }).fail(function (e) {
                    //toastr.error('Product not added');
                });
            }
        });

    });

</script>

然后您可以使用 form 标记内的提交按钮来触发提交:

<form method="post" id="formdata" asp-controller="Product" asp-action="UploadProduct">
    <div class="form-group">
        <p>Please provide a name for your product:</p>
        <input type="text" name="Name" required />
    </div>
    <div class="form-group">
        <p>Please provide a price for your product:</p>
        <input type="number" name="Price" required />
    </div>
    <div class="form-group">
        <p>Please provide a description for your product:</p>
        <input type="text" name="Description" required />
    </div>
    <button type="submit" class="btn btn-primary" name="submit" id="ajaxsubBtn1">Upload Files</button>

</form>