Ajax表单被提交多次

Question

我在我的控制器的动作，其提交的新模式。形式是在模式弹出，我需要一个完整的AJAX验证。一切正常，除了形式多次提交时间可持续。它的工作原理，如果我删除yiiActiveForm（“验证”）命令，但我需要它在提交之前验证。

$('#myformid').off('submit').on('submit', function(e){
    e.preventDefault();
    e.stopImmediatePropagation();


    var form = $(this);
    var formData = form.serializeArray();
    form.data('yiiActiveForm').submitting = true;
    form.yiiActiveForm('validate');

    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: formData,
        success: function (data) {

            if(data !== false){
                $('#modal-add-associate').modal('hide');
            }
        },
        error: function () {

        }
    });
    return false;

});

的形式开始

$form = ActiveForm::begin(['enableAjaxValidation' => true,'validationUrl'=> $validationUrl]); 

因此，通常是通过Ajax和自定义URL（和它的作品除了在提交）的验证。我怎样才能启动验证当表单提交获得？

Answer 1

您应该使用beforeSubmit事件，而不是submit高于一切，因为你正在使用的ActiveForm和Yii2 ActiveForm为您提供以下表单事件

可用的事件有：

• beforeValidate。
• afterValidate。
• beforeValidateAttribute。
• afterValidateAttribute。
• beforeSubmit。
• ajaxBeforeSend。
• ajaxComplete。

了解更多关于ActiveForms

看你的JavaScript和问题，你不需要这些行

form.data('yiiActiveForm').submitting = true;
form.yiiActiveForm('validate');

因为如果你使用的是submit类型的按钮提交表单验证自动触发作为选项validateOnSubmit默认情况下true为ActiveForm所以你应该删除它们。

确保活动形式所具有的submit式按钮的形式应如下

$form = ActiveForm::begin(['enableAjaxValidation' => true,'validationUrl'=> $validationUrl]);

//Your fields
//.....
//.....
echo Html::submitButton('Submit', ['class' => 'btn']); 
ActiveForm::end();

而你需要修改你的JavaScript，你不需要使用.off().on()作为beforeSubmit只有一次的形式验证，通过验证将被调用，并且使用的是type在ajax通话，这是method别名选项。如果您使用的是type之前的jQuery的版本，您应该使用1.9.0。这心不是你的情况，我认为。 ifyou使用的是最新版本的Yii然后2.0.16它包括由经3.3.1默认的Jquery yii\web\JqueryAsset所以你可以改变它method。

$('#myformid').on('beforeSubmit', function (e) {
    e.preventDefault();

    var form = $(this);
    var formData = form.serializeArray();

    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),
        data: formData,
        success: function (data) {
            if (data !== false) {
                $('#modal-add-associate').modal('hide');
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });
    return false;
});