Yii2 - ActiveForm ajax gửi

Question

Tôi có thể sử dụng ActiveForm bằng những yêu cầu này như thế nào?

• Gửi biểu mẫu bằng ajax.

• Trước khi gửi bằng ajax: Kiểm tra xem lỗi có thoát hay không.

• Sau khi gửi: Hiển thị lỗi trường theo đầu vào của trường nếu máy chủ phản hồi kết quả tiết kiệm không thành công.

Answer 1

Đây là biểu mẫu của bạn trong chế độ xem. Tôi thích sử dụng các hành động khác nhau để xác thực và lưu. Bạn có thể kết hợp chúng thành một phương thức duy nhất.

<?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(); ?> 

Trong hành động xác thực bạn nên viết. Nó xác nhận form của bạn và trả về danh sách các errrs cho client. :

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); 
    } 
} 

Và đây là hành động lưu. Để xác thực dữ liệu đầu vào cho bảo mật:

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, 
    ]); 
} 

Mã này sẽ xác thực biểu mẫu của bạn đang hoạt độngValidate() và. Để gửi biểu mẫu của bạn qua AJAX, hãy sử dụng beforeSubmit event. Trong tệp javascript của bạn viết:

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

Đó là tất cả.

Answer 2

Gửi biểu mẫu bằng ajax. Trước khi gửi bằng ajax: Kiểm tra xem lỗi có thoát hay không. yii hiển thị lỗi nếu có theo mặc định ....... :)

use yii\helpers\Html; 
use yii\bootstrap\ActiveForm; 
use yii\widgets\Pjax; 

/* @var $this yii\web\View */ 
/* @var $model backend\models\search\JobSearch */ 
/* @var $form yii\bootstrap\ActiveForm */ 
?> 

<div class="job-search"> 

    <?php $form = ActiveForm::begin([ 
     'action' => ['index'], 
     //'method' => 'get', 
     'options' => ['id' => 'dynamic-form111'] 
    ]); ?> 

    <?php echo $form->field($searchModel, 'id') ?> 

    <?php echo $form->field($searchModel, 'user_id') ?> 

    <?php echo $form->field($searchModel, 'com_id') ?> 

    <?php echo $form->field($searchModel, 'job_no') ?> 

    <?php echo $form->field($searchModel, 'court_id') ?> 

    <?php // echo $form->field($model, 'case_no') ?> 

    <?php // echo $form->field($model, 'plainttiff') ?> 

    <?php // echo $form->field($model, 'defendant') ?> 

    <?php // echo $form->field($model, 'date_fill') ?> 

    <?php // echo $form->field($model, 'court_date') ?> 

    <?php // echo $form->field($model, 'status_id') ?> 

    <?php // echo $form->field($model, 'created_at') ?> 

    <?php // echo $form->field($model, 'updated_at') ?> 

    <div class="form-group"> 
     <?php echo Html::submitButton('Search', ['class' => 'btn btn-primary','id'=>'submit_id']) ?> 
     <?php echo Html::resetButton('Reset', ['class' => 'btn btn-default']) ?> 
    </div> 

    <?php ActiveForm::end(); ?> 

</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('body').on('beforeSubmit', 'form#dynamic-form111', function() { 
      var form = $(this); 
      // return false if form still have some validation errors 
      if (form.find('.has-error').length) 
      { 
       return false; 
      } 
      // submit form 
      $.ajax({ 
      url : form.attr('action'), 
      type : 'get', 
      data : form.serialize(), 
      success: function (response) 
      { 
       var getupdatedata = $(response).find('#filter_id_test'); 
       // $.pjax.reload('#note_update_id'); for pjax update 
       $('#yiiikap').html(getupdatedata); 
       //console.log(getupdatedata); 
      }, 
      error : function() 
      { 
       console.log('internal server error'); 
      } 
      }); 
      return false; 
     }); 
    }); 
</script>