ajax - Yii2 - ActiveForm ajax 提交

Question

我如何使用符合这些要求的 ActiveForm？

用ajax提交表单。

使用ajax提交之前:检查是否有错误退出。

提交后:如果服务器响应保存失败结果，则显示字段输入下的字段错误。

Answer 1

这是你的表格。我更喜欢使用不同的操作进行验证和保存。您可以将它们加入单个方法。

<?php $form = \yii\widgets\ActiveForm::begin([
    'id' => 'my-form-id',
    'action' => 'save-url',
    'enableAjaxValidation' => true,
    'validationUrl' => 'validation-rul',
]); ?>

<?= $form->field($model, 'email')->textInput(); ?>

<?= Html::submitButton('Submit'); ?>
<?php $form->end(); ?>

在验证操作中，您应该编写。它验证您的表单并将错误列表返回给客户端。 :

public function actionValidate()
{
    $model = new MyModel();
    $request = \Yii::$app->getRequest();
    if ($request->isPost && $model->load($request->post())) {
        \Yii::$app->response->format = Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }
}

这是保存操作。在验证输入数据以确保安全时:

public function actionSave()
{
    $model = new MyModel();
    $request = \Yii::$app->getRequest();
    if ($request->isPost && $model->load($request->post())) {
        \Yii::$app->response->format = Response::FORMAT_JSON;
        return ['success' => $model->save()];
    }
    return $this->renderAjax('registration', [
        'model' => $model,
    ]);
}

此代码将在 actionValidate() 和验证您的表单。要通过 AJAX 提交表单，请使用 beforeSubmit 事件。在您的 javascript 文件中写入:

$(document).on("beforeSubmit", "#my-form-id", function () {
    // send data to actionSave by ajax request.
    return false; // Cancel form submitting.
});

就这样。