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

Question

我似乎找不到这个问题的解决方案。我进行了搜索，但人们采取的方法似乎都不适合我的情况。

$(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()}`);
        }
    });

});

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

注意。每当我拿出

$(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>

我有一个模式，每当用户单击页面上的“查看/编辑”时，服务器就会返回 <form id="createDriverForm">......</form>通过$("#driverContent").html(data) 。即数据是形式。当我说表单是动态呈现时，巩固了我的解释。

Answer 1

您不需要$(document).on("submit".....)。 如果“#createDriverForm”是一个元素，请将submitHandler()更改为以下内容。 https://jqueryvalidation.org/validate/

$("#createDriverForm").validate({

    submitHandler: function(form) {
       $(form).ajaxSubmit();    
});