Jquery验证单击提交按钮两次ASP.Net核心MVC项目

我似乎找不到解决这个问题的办法。我已经搜索过了，人们采取的方法似乎都不适用于我的情况

$(document).on("submit", "#createDriverForm", function (e) {

    e.preventDefault();

    $("#createDriverForm").validate({
        ignore: null,
        rules: {
            driversLicenceCountryId: {
                requiredselect: 0
            },
            driversLicenceNumber: "required",
            firstName: "required",
            lastName: "required",
            genderId: {
                requiredselect: 0
            },
            dateOfBirth: "required",
            driversLicenceDateIssued: "required",
            driversLicenceExpiryDate: "required",
            driversLicenceTypeId: {
                requiredselect: 0
            },
            driversLicenceFirstIssued: "required"
        },
        //For custom messages
        messages: {
            driversLicenceCountryId: {
                requiredselect: "Please select your country of licence"
            },
            driversLicenceNumber: "Please enter driver's licence number",
            firstName: "Please enter your first name",
            lastName: "Please enter your last name",
            genderId: "Please select your gender",
            dateOfBirth: {
                requiredselect: "Please enter your date of birth"
            },
            driversLicenceDateIssued: "Please enter your driver's licence issue date",
            driversLicenceExpiryDate: "Please enter your driver's licence expiry date",
            driversLicenceTypeId: {
                requiredselect: "Please select licence type"
            },
            driversLicenceFirstIssued: "Please enter your driver's licence first issue date"
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var placement = $(element).data('error');
            if (placement) {
                $(placement).append(error);
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function () {

            var driverModal = $("[data-remodal-id=driver]").remodal();

            $.ajax({
                beforeSubmit: ProcessingModal("Saving driver details. Please hold...."),
                type: "POST",
                url: "/Quote/SaveDriverDetails",
                data: $("#createDriverForm", modal).serialize(),
                success: function (data) {
                    SuccessSwalWithCallback(data,
                        function () {
                            driverModal.close();
                            window.location.reload();
                        });
                },
                error: function (data) {
                    ErrorSwal(data.responseText);
                }
            });
        },
        invalidHandler: function (event, validator) {
            Notice(`Please ensure all required fields are entered. Number of invalid fields: ${validator.numberOfInvalids()}`);
        }
    });

});

我有一个表单，它通过服务器动态呈现，然后显示在一个模式上。每当我点击表单上类型为submit的save按钮时。我意识到我必须在触发验证效果之前再次单击。我需要帮助，以找出采取的方法，请

注意。每当我拿出钥匙的时候

$(document).on("submit", "#createDriverForm", function (e)

然后表单正常发布，页面重新加载，验证不会触发

---

编辑：了解如何在DOM上填充表单

<div id="driverModal" class="remodal b-top-red" data-remodal-id="driver" style="max-width: 80%" data-remodal-options="closeOnOutsideClick: false">
        <button data-remodal-action="close" class="remodal-close"></button>
        <div id="driverContent"></div>
    </div>

$(document).on("opened",
    "#driverModal",
    function () {
        $("#createDriverForm").validate({
            ignore: null,
            rules: {
                driversLicenceCountryId: {
                    requiredselect: 0
                },
                driversLicenceNumber: "required",
                firstName: "required",
                lastName: "required",
                genderId: {
                    requiredselect: 0
                },
                dateOfBirth: "required",
                driversLicenceDateIssued: {
                    required: true
                },
                driversLicenceExpiryDate: {
                    required: true
                },
                driversLicenceTypeId: {
                    requiredselect: 0
                },
                driversLicenceFirstIssued: "required"
            },
            //For custom messages
            messages: {
                driversLicenceCountryId: {
                    requiredselect: "Please select your country of licence"
                },
                driversLicenceNumber: "Please enter driver's licence number",
                firstName: "Please enter your first name",
                lastName: "Please enter your last name",
                genderId: "Please select your gender",
                dateOfBirth: {
                    requiredselect: "Please enter your date of birth"
                },
                driversLicenceDateIssued: "Please enter your driver's licence issue date",
                driversLicenceExpiryDate: "Please enter your driver's licence expiry date",
                driversLicenceTypeId: {
                    requiredselect: "Please select licence type"
                },
                driversLicenceFirstIssued: "Please enter your driver's licence first issue date"
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                var placement = $(element).data("error");
                if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function (form) {
                $.ajax({
                    beforeSubmit: ProcessingModal("Saving driver details. Please hold...."),
                    type: "POST",
                    url: "/Quote/SaveDriverDetails",
                    data: $(form).serialize(),
                    success: function (data) {
                        SuccessSwalWithCallback(data,
                            function () {
                                driverModal.close();
                                window.location.reload();
                            });
                    },
                    error: function (data) {
                        ErrorSwal(data.responseText);
                    }
                });
            },
            invalidHandler: function (event, validator) {
                Notice(`You seem to have missed ${validator
                    .numberOfInvalids()} field. Please enter the missing information`);
            }
        });
    });

我有一个模式，每当用户在页面上单击“查看/编辑”，服务器就会通过

$（“#driverContent”）.html（数据）

返回

…

。i、 e.以表格形式提供的数据。巩固我的解释，当我说表单是动态呈现的。

您不需要有$（document）.on（“提交”…）。 如果“#createDriverForm”是一个元素，请将submitHandler（）更改为以下内容。

---

所以我想出了解决办法。必须先检查带有表单的模态何时填充，然后调用validate

$(document).on("opened", "#driverModal", function(){});

检查模态何时打开，然后我调用validate，因为现在表单将存在于DOM中

<div id="driverModal" class="remodal b-top-red" data-remodal-id="driver" style="max-width: 80%" data-remodal-options="closeOnOutsideClick: false">
        <button data-remodal-action="close" class="remodal-close"></button>
        <div id="driverContent"></div>
    </div>

$(document).on("opened",
    "#driverModal",
    function () {
        $("#createDriverForm").validate({
            ignore: null,
            rules: {
                driversLicenceCountryId: {
                    requiredselect: 0
                },
                driversLicenceNumber: "required",
                firstName: "required",
                lastName: "required",
                genderId: {
                    requiredselect: 0
                },
                dateOfBirth: "required",
                driversLicenceDateIssued: {
                    required: true
                },
                driversLicenceExpiryDate: {
                    required: true
                },
                driversLicenceTypeId: {
                    requiredselect: 0
                },
                driversLicenceFirstIssued: "required"
            },
            //For custom messages
            messages: {
                driversLicenceCountryId: {
                    requiredselect: "Please select your country of licence"
                },
                driversLicenceNumber: "Please enter driver's licence number",
                firstName: "Please enter your first name",
                lastName: "Please enter your last name",
                genderId: "Please select your gender",
                dateOfBirth: {
                    requiredselect: "Please enter your date of birth"
                },
                driversLicenceDateIssued: "Please enter your driver's licence issue date",
                driversLicenceExpiryDate: "Please enter your driver's licence expiry date",
                driversLicenceTypeId: {
                    requiredselect: "Please select licence type"
                },
                driversLicenceFirstIssued: "Please enter your driver's licence first issue date"
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                var placement = $(element).data("error");
                if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function (form) {
                $.ajax({
                    beforeSubmit: ProcessingModal("Saving driver details. Please hold...."),
                    type: "POST",
                    url: "/Quote/SaveDriverDetails",
                    data: $(form).serialize(),
                    success: function (data) {
                        SuccessSwalWithCallback(data,
                            function () {
                                driverModal.close();
                                window.location.reload();
                            });
                    },
                    error: function (data) {
                        ErrorSwal(data.responseText);
                    }
                });
            },
            invalidHandler: function (event, validator) {
                Notice(`You seem to have missed ${validator
                    .numberOfInvalids()} field. Please enter the missing information`);
            }
        });
    });

---

非常简单，您需要将验证代码放在$（document）.ready函数上。因此，它成为加载文档的一部分。当您点击相关提交按钮或以任何方式提交表单时。您将在第一次单击中点击验证代码

---

这就是全部

所以你点击->什么都不发生，验证通过->再次点击，然后提交？#createDriverForm“是一个元素还是元素？@lloyd是的，就是这样。@Goontracker它是一个

元素”#createDriverForm“在服务器将其从返回到视图上的模式之前，在DOM上不存在。这就是为什么我要做

$（document）.on（“click”，“#createDriverForm”，function（）{}）

。我试过你的建议，但它是正常提交，而不是通过ajax。我定义了

var选项={}并将其传递到
$（表单）.ajaxSubmit（选项）
。由于页面加载中不存在
#createDriverForm
，因此没有设置
.validate（）
的事件处理程序。在某些情况下，动态加载的代码也可以在文档级别的ajax completed事件中捕获。我在$（文档）中有它。ready函数，但它仍然没有命中validate