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

Question

我似乎找不到解决这个问题的方法。我进行了搜索，none 人采用的方法似乎适用于我的情况。

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

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

Answer 1

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

$("#createDriverForm").validate({

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

Answer 2

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

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

检查模式何时打开然后我现在调用验证原因然后表单将存在于 DOM。

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

Answer 3

您需要将验证码放在 $(document).ready 函数上，这非常简单。所以它成为加载文档的一部分。何时单击相关提交按钮或何时使用任何方式提交表单。您将在第一次点击时点击验证码。

就这些

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

Jquery validate click submit button twice ASP.Net core MVC project

forms

asp.net-mvc

jquery

jquery-validate

visual-studio