Yii2 活动表单提交事件被调用两次

Question

This question had been asked before that question:

症状

我有一个 id 等于 surasGo 的活动表格。我在提交前使用 Jquery 附加了 submit 事件来处理一些任务。我注意到事件函数中的任何 alert 函数都产生了两次。我查看了 HTML 页面的源代码，发现了以下片段：

...
jQuery('#surasGo').yiiActiveForm([], []);
});</script></body>

在上一个片段之前有链接 javascript 文件包含我的代码：

$('#surasGo').submit(function(e){
    e.preventDefault();
    suraId = $('#surasId').val()*1;
    verseId = $('#versesId').val()*1;   
    if (!isNaN(verseId*1) && verseId !== 0){
      window.location = '/verses/view/'+verseId;
    }
    else if (!isNaN(suraId) && suraId !== 0){
      window.location = '/view/'+suraId;
    }
    else{
      alert(tError+"\n"+tQAccessError);// this alerted twice for example
    }
    return false;
  });

我试过的

我意识到第一个片段 jQuery('#surasGo').yiiActiveForm([], []); 可能由于活动表单客户端验证而导致提交事件的双重调用，因此我将 'enableClientValidation'=>false 属性添加到活动表单：

 <?php $form = ActiveForm::begin(['id' => 'surasGo','enableClientValidation'=>false, 'action'...

不过，表单好像还是要提交两次事件！这种奇怪行为的原因是什么以及如何解决？

Answer 1

我认为您还需要停止执行任何下游的事件处理程序链。这可以通过调用 event.stopImmediatePropagation() 除了 event.preventDefault().

来完成

这样试试：

$('#surasGo').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation(); // this is required in some cases
    suraId = $('#surasId').val()*1;
    verseId = $('#versesId').val()*1;   
    if (!isNaN(verseId*1) && verseId !== 0){
      window.location = '/verses/view/'+verseId;
    }
    else if (!isNaN(suraId) && suraId !== 0){
      window.location = '/view/'+suraId;
    }
    else{
      alert(tError+"\n"+tQAccessError);// this alerted twice for example
    }
    return false;
  });

Answer 2

工作起来很有魅力

我实现并测试了以下扩展：

https://github.com/Faryshta/yii2-disable-submit-buttons

作曲家要求

"faryshta/yii2-disable-submit-buttons": "*"

全球注册资产

class AppAsset extends yii\web\AssetBundle
{
    public $depends = [
        'faryshta\assets\ActiveFormDisableSubmitButtonsAsset',
        // other dependencies
    ];
}

用法

$form = ActiveForm::begin([
    'options' => ['class' => 'disable-submit-buttons'],
    // other configurations
]);

    // inputs

    Html::submitButton('Submit', [
        // optional, will show the value of `data-disabled-text` attribute
        // while handling the validation and submit
        'data' => ['disabled-text' => 'Please Wait']
    ])

$form->end();

Answer 3

为 ActiveForm 设置 'validateOnSubmit' => false 对我有用：

$form = ActiveForm::begin(['id' => 'my-form-id', 'validateOnSubmit' => false]);

Answer 4

尝试在 "beforeValidate" 方法中使用 return 布尔值 false，如下所示：

$(document).on("beforeValidate", "#form_id", function (event, messages) {
      //console.log('beforeValidate');
      return false;
    });

Yii2 活动表单提交事件被调用两次

Yii2 active form submit event invoked twice

jquery

yii2

active-form