Yii2 activeform ajax gửi và xác nhận

Question

Hiện tại để đạt được việc gửi và xác thực ajax cùng một lúc. Tôi đang sử dụng chức năng tùy chỉnh như:

$('.edit_form').submit(function (e) { 
     e.preventDefault(); 
     var form = $(this); 
     var formData = $(this).serialize(); 
     if (form.find('.has-error').length) { 
      return false; 
     } 

     $.ajax({ 
      url: form.attr("action"), 
      type: form.attr("method"), 
      data: formData, 
      success: function (data) { 
       ... 
      }, 
      error: function() { 
       alert("Something went wrong"); 
      } 
     }); 

    }); 

Và đây là php bên, để xác nhận cấu hình của tôi trông như thế:

$form = ActiveForm::begin([ 
    'id' => "some_form", 
    'action' => ['user/edit'], 
    'options' => ['class' => 'edit_form'], 
    'enableAjaxValidation' => false, 
    'enableClientValidation' => true, 
]); ?> 

Tôi chắc chắn rằng nó không phải là cách tốt nhất để đạt được những gì tôi nhu cầu. Đặc biệt là phần này mà tôi sử dụng để ngăn chặn gửi trong trường hợp lỗi xác thực:

Mọi đề xuất? Làm thế nào để đạt được ajax trình và xác nhận đúng cách sử dụng cài đặt sẵn có của Yii 2?

Answer 1

Sử dụng beforeSubmit sự kiện thay vì nộp, các beforeSubmit sẽ chỉ được kích hoạt một lần dưới hình thức vượt qua xác nhận.

$('form').on('beforeSubmit', function(e) { 
    var form = $(this); 
    var formData = form.serialize(); 
    $.ajax({ 
     url: form.attr("action"), 
     type: form.attr("method"), 
     data: formData, 
     success: function (data) { 
      ... 
     }, 
     error: function() { 
      alert("Something went wrong"); 
     } 
    }); 
}).on('submit', function(e){ 
    e.preventDefault(); 
}); 

Answer 2

bạn có thể sử dụng AjaxSubmitButton.

Biểu mẫu của bạn nên b

$form = ActiveForm::begin([ 
    'id' => "some_form", 
    'action' => 'javascript:void(0)', 
    'options' => ['class' => 'edit_form'], 
]); 

sử dụng AjaxSubmitButton đây

AjaxSubmitButton::begin([ 
           'label' => 'Submit', 
           'id' => 'some_form', 
           'ajaxOptions' => [ 
            'type' => 'POST', 
            'url' => \yii\helpers\Url::to(['/user/edit']), 
            'success' => new \yii\web\JsExpression(
              'function(data){ 
               if(data=="success") 
                { 
                }else{ 
                 $.each(data, function(key, val) { 
                  $("#"+key).after("<div class=\"help-block\">"+val+"</div>"); 
                  $("#"+key).closest(".form-group").addClass("has-error"); 
                 }); 
                } 
               }' 
            ), 
           ], 
           'options' => ['class' => 'btn btn-success', 'type' => 'submit'], 
          ]); 
          AjaxSubmitButton::end(); 

Trong điều khiển của bạn

public function actionEdit() 
{ 
    $model = new User; 
    if($model->save()) 
    { 
     $result = 'success'; 
     Yii::$app->response->format = trim(Response::FORMAT_JSON); 
       return $result; 
    }else{ 
     $error = \yii\widgets\ActiveForm::validate($model); 
       Yii::$app->response->format = trim(Response::FORMAT_JSON); 
       return $error; 
    } 
} 

Answer 3

Here Tôi đã tìm thấy một số thủ thuật xác nhận javascript-side thú

Vì vậy, một javascript nút gửi có thể như:

$('body').on('click', '#submit', function(e) { 
    e.preventDefault(); 
    var yiiform = $('#my-form'); 
    $.ajax({ 
    type: yiiform.attr('method'), 
     url: yiiform.attr('action'), 
     data: yiiform.serializeArray(), 
     success: function(data) { 
     if(data.success == 'true') { 
      window.location.href = 'http://my.success.page'; 
     } else { 
      // here there is (maybe) the right way to trigger errors 
      $.each(data, function(key, val) { 
      yiiform.yiiActiveForm('updateAttribute', key, [val]); 
      }); 
     } 
     } 
    }); 
} 

kích hoạt bởi:

<?= Button::widget([ 
    'label' => Yii::t('app', 'Submit'), 
    'options' => [ 
     'id'=>'submit', 
     'class' => 'btn btn-primary pull-right', 
    ]]);?> 

Và bộ điều khiển hành động sẽ trả lời với:

... 
if ($model->load(Yii::$app->request->post())) { 
    Yii::$app->response->format = Response::FORMAT_JSON; 
    if($model->save()) { 
     return ['success'=>'true']; 
    } else { 
     return ActiveForm::validate($model); 
    } 
} 
... 

tin chi tiết về ActiveForm: : validate() có thể được tìm thấy here