How to return ajax with separate API URL response to controller in YII2?

Question

I am trying to call a API URL using AJAX. I need to validate the response and update the DB, SO I need to return it to the controller. Is there any way to do that. Here is my view, JS and controller code.

Here is my View Code where I have a separate URL for validation, which is the API URL View

    <?php $form = ActiveForm::begin([
    'action' => ['users/renderstep3'],
    'validationUrl' => 'API URL',
    'options' => [
        'class' => 'comment-form'
         ]
      ]); ?>
      <?= $form->field($paymentmodel, 'customerId')->hiddenInput(['value'=> $userid])->label(false) ?>
      <?= $form->field($paymentmodel, 'owner')->textInput(['maxlength' => true]) ?>
     <div class="form-group">
           <?= Html::submitButton('Submit', ['class' => 'btn btn-success']) ?>
     </div>
     <?php ActiveForm::end(); ?>
  </div>

JS

    jQuery(document).ready(function($) {
    $('body').on('submit', '.comment-form', function(event) {
        event.preventDefault(); // stopping submitting
        var data = $(this).serializeArray();
        data.splice(0,1);
        var result = {};

        for ( i=0 ; i < data.length ; i++)
            {
            key = data[i].name.replace("UserPaymentDetails[", "").slice(0,-1);
            result[key] = data[i].value;
            }
        var url = $(this).attr('validationUrl');
        $.ajax({
           url: url,
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(result)
        })
        .done(function(response) {
                return response;
        })
        .fail(function() {
            console.log("error");
        });

    });
});

Controller Action

       public function actionRenderstep3()
         {
         $model = new Users();
         $detailsmodel = new UserDetails();
         $paymentmodel = new UserPaymentDetails();

        if (Yii::$app->request->isAjax) {
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        $data = Yii::$app->request->post();
        print_r($data) ; exit;
        }

        if ($paymentmodel->load(Yii::$app->request->post()) && $paymentmodel->validate()) 
        {
        $paymentmodel->Status = 0;
        $paymentmodel->save();
        return $this->redirect(['index']);
        }
        return $this->render('renderstep3', [
       'model' => $model,
       'detailsmodel' => $detailsmodel,
       'paymentmodel' => $paymentmodel,
        ]);   }

Thanks in advance!!

Answer 1

In your controller, you have to change the action like this in order to validate using Ajax. I have edited my answer. Please note that you can delete your custom js code in order to use like this.

// ... The View file
<?php
$form = ActiveForm::begin([
    'action' => ['users/renderstep3'],
    'enableAjaxValidation' => true,
    'validationUrl' => 'API URL',
    'options' => [
        'class' => 'comment-form'
    ]
]);
?>
    <?= $form->field($paymentmodel, 'customerId')->hiddenInput(['value'=> $userid])->label(false) ?>
    <?= $form->field($paymentmodel, 'owner')->textInput(['maxlength' => true]) ?>
    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-success']) ?>
    </div>
<?php ActiveForm::end(); ?>

// ... Controller
public function actionRenderstep3()
{
    $model = new Users();
    $detailsmodel = new UserDetails();
    $paymentmodel = new UserPaymentDetails();

    if (Yii::$app->request->isAjax && $paymentmodel->load(Yii::$app->request->post())) {
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        return ActiveForm::validate($model);
    }

    if ($paymentmodel->load(Yii::$app->request->post())) {
        $paymentmodel->Status = 0;
        $paymentmodel->save(false); // Validate false, because we did the validation before
        return $this->redirect(['index']);
    }

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

You can find more information here https://www.yiiframework.com/doc/guide/2.0/en/input-validation

Answer 2

<?php
$form = ActiveForm::begin([
            'action' => ['users/renderstep3'],
            'validationUrl' => 'API URL',//ajax validation hit to validationUrl if provide other wise validationUrl is action Url
            'options' => [
                'class' => 'comment-form'
            ]
        ]);
?>

and change some code in js the below code calls befor form submit

$('body').on('beforeSubmit', '.comment-form', function(event) 

In controller

In case of single model validation

if ($paymentmodel->load(Yii::$app->request->post())) {
    if (Yii::$app->request->isAjax) {
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        return yii\widgets\ActiveForm::validate($model);
    }

    $paymentmodel->Status = 0;
    if ($paymentmodel->save(false)) {
        return $this->redirect(['index']);
    }
}

In case of multiple model validation

if ($model->load(Yii::$app->request->post())) {
    $detailsmodel->load(Yii::$app->request->post());
    $paymentmodel->load(Yii::$app->request->post());


    if (Yii::$app->request->isAjax) {
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        $return = yii\widgets\ActiveForm::validate($model);
        $return = \yii\helpers\ArrayHelper::merge(yii\widgets\ActiveForm::validate($detailsmodel), $return);
        $return = \yii\helpers\ArrayHelper::merge(yii\widgets\ActiveForm::validate($paymentmodel), $return);
        return $return;
    }

    //here is data saving or logic
}