Yii2 - activeform ajax 正常表单提交验证

Yii2 - activeform ajax validation with normal form submit

使用yii.activeForm.jsbeforeSubmit功能,如何让它在验证通过时执行正常的表单提交?

我试过以下方法:

$('.ajax-form').on('beforeSubmit', function (event) {
    var form = $(this);
    var url = form.attr('action');
    var type = form.attr('method');
    var data = form.serialize();

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function (result) {
            if (result.errors.length != 0) {
                form.yiiActiveForm('updateMessages', result.errors, true);
            }
            else if (result.confirmed == true) {
                $('.confirm-panel').show();
            }
            else {
                return true;
            }
       },
       error: function() {
           alert('Error');
       }
    });

    // prevent default form submission
    return false;
});

控制器:

public function actionProcess()
{
    $model = $this->findModel($id);

    if (Yii::$app->request->isAjax) {
        $return_array = [
            'errors' => [],
            'confirmed' => false,
        ];

        Yii::$app->response->format = Response::FORMAT_JSON;
        $return_array['errors'] = ActiveForm::validate($model);

        if ($model->confirm == 1) {
            $return_array['confirmed'] = true;
        }

        return $this->asJson($return_array);
    }

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['success']);
    }

    return $this->render('process', [
        'model' => $model,
    ]);
}

如您所见,我也在尝试 return 在我的 AJAX 回复中添加其他数据。我遇到的问题是 ajax 成功中的 return true 不起作用。我似乎无法摆脱这个功能。我也在这里尝试过 form.submit() 但这只是通过 AJAX.

进行提交循环

顺便说一下,我没有使用 enableAjaxValidation,因为我的控制器中有一些额外的自定义验证。所以这就是为什么我为此创建了自己的自定义处理程序。

无论是内置的还是自定义的,都应在模型中进行输入验证。然后就可以轻松使用默认的ajax验证了。

要创建自定义验证器,请检查 http://www.yiiframework.com/doc-2.0/guide-input-validation.html#creating-validators

首先,您不能从 ajax success functionreturn true 继续提交表单,因为它是 javascript 和最后一行 return true 在收到 response 之前已经执行,所以表单不会通过在成功函数中返回 true 来提交。

如果您想在成功 ajax 验证后手动提交页面,则需要使用事件 afterValidate 而不是使用 beforeSubmit,因为如果您这样做,它将进入无限循环尝试在 ajax 成功函数中使用 $("form").submit() 提交表单。所以改变你的行

$('.ajax-form').on('beforeSubmit', function (event) {

$('.ajax-form').on('afterValidate', function (event) {

然后将您的成功函数更改为

success: function (result) {
            if (result.errors.length != 0) {
                form.yiiActiveForm('updateMessages', result.errors, true);
            }
            else if (result.confirmed == true) {
                $('.confirm-panel').show();
            }
            else {
                form.submit();
            }
       },

希望对您有所帮助。

您无需为此提议编写任何此类代码。 Yii 可以处理 ajax 验证 it-self。您唯一需要做的就是以活动形式启用它。

php $form = ActiveForm::begin([
         'id' => 'contact-form',
         'enableAjaxValidation' => true,
 ]); ?> 

并在初始化 $model 后将此代码放入控制器中。

if (Yii::$app->request->isAjax) {
    Yii::$app->response->format = Response::FORMAT_JSON;
    return = ActiveForm::validate($model);
}