如果模态关闭并重新打开或验证捕获丢失的输入，则使用 .one 提交的模态表单提交多个

Posted 2023-04-13

【中文标题】如果模态关闭并重新打开或验证捕获丢失的输入，则使用 .one 提交的模态表单提交多个

【英文标题】：Modal form submit using .one submits multiple if modal closed and reopened or validation catches missing input

【发布时间】：2021-09-03 11:42:47

【问题描述】：

我有一个名为#fileModal 的模态。 “创建文件”按钮调用 initCreateFile。这从 ajax 调用 (c# PartialView) 中获取一个表单并将该表单加载到#fileModal，然后显示模式。 其次，eventFileValidation 然后为表单创建一个验证。 最后，submitCreateEventFile 使用 .one 附加一个监听器以防止多次提交。

有些操作似乎会导致多次提交。 首先，关闭#fileModal，然后使用“创建文件”重新打开模式，然后提交表单将导致提交等于打开模式的次数，以及最新的表单数据。 其次，如果验证在提交时发现错误，那么用户在修复验证错误后提交表单，它会提交多次。

我认为发生的事情是每次调用 initCreatefile 时 submitCreateEventFile 都会创建一个侦听器。验证可能也会调用这个，但我不确定。我怎样才能防止这种情况发生？

    submitCreateEventFile: function (modal) 
        
        $(modal).one("submit", "#create-event-file-form", function () 
            event.preventDefault(); 
            var fileModal = $('#fileModal');
            closeModal(fileModal);
            var waitModal = $('#waitModal');
            initModal("", waitModal);
            
            $.ajax(
                type: 'POST',
                url: urls.eventfilecreate,
                data: new FormData(this),
                contentType: false,
                processData: false
            ).done(function (file) 
                
                closeModal(waitModal);
                eventFileApp.addFile(file);
            );
            $(this).on('submit', function (evt) 
                evt.preventDefault();
            );
        )
    ,
    initCreateFile: function (element) 
        var fileModal = $('#fileModal');
        initModal("Create Event File", fileModal);
        $.ajax(
            type: 'GET',
            url: urls.eventfilecreate,
            data:  eventId: eventFileApp.getEventId(element) ,
            traditional: true
        ).done(function (data) 
            setModalContents(fileModal, data);
            eventFileApp.eventFileValidation(fileModal);
            
            eventFileApp.submitCreateEventFile(fileModal);
        );
    ,
    eventFileValidation: function (modal) 
        var form = modal.find('form');
        var isCreateForm = form.attr('id') == "create-event-file-form";
        form.validate(
            errorClass: "field-validation-error",
            rules: 
                Title: 
                    required: true
                ,
                File: 
                    required: isCreateForm
                
            ,
            messages: 
                Title: 
                    required: "Title is required."
                ,
                File: 
                    required: "File is required."
                
            
        );
    ,

【参考方案1】：

在调用验证和提交方法之前添加 $('#fileModal').off('submit') 可以防止添加重复的事件侦听器。