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

Posted 2023-05-09

【中文标题】Jquery 验证单击提交按钮两次 ASP.Net 核心 MVC 项目

【英文标题】：Jquery validate click submit button twice ASP.Net core MVC project

【发布时间】：2018-01-07 14:51:16

【问题描述】：

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

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

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

【问题讨论】：

所以你点击 -> 没有任何反应，验证通过 -> 再次点击，然后提交？

"#createDriverForm" 是

@lloyd 是的，就是这样。

@Goontracker 这是一个<form> 元素

【参考方案1】：

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

$("#createDriverForm").validate(

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

【讨论】：

"#createDriverForm" 不存在于 DOM 上，直到服务器将其从视图返回到模式。这就是为什么我做了$(document).on("click", "#createDriverForm", function())。我尝试了您的建议，但它是正常提交​​的，而不是通过 ajax 提交的。我用我的 ajax 选项定义了var options = ;，并将它传递给$(form).ajaxSubmit(options)。认为因为 #createDriverForm 在页面加载时不存在 .validate() 的事件处理程序没有设置。

【参考方案2】：

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

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

检查模式何时打开，然后我现在调用 validate cause，然后表单将存在于 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`);
            
        );
    );

【参考方案3】：

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

就是这样

【讨论】：

在某些情况下，动态加载的代码也可以在文档级别的 ajax 完成事件中捕获。

我确实在 $(document).ready 函数中有它，但它仍然没有达到验证