Yii2 activeform ajax invio e convalida

Question

Attualmente per raggiungere ajax invio e convalida allo stesso tempo. Sto utilizzando funzione personalizzata come:

$('.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"); 
      } 
     }); 

    }); 

E qui si parte php, per la convalida il mio config sembra che:

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

Sono sicuro che non E 'il modo migliore per ottenere quello che ho bisogno. Soprattutto questa parte che utilizzo per impedire l'invio in caso di errore di convalida:

if (form.find('.has-error').length) { 
     return false; 
    } 

Qualche suggerimento? Come ottenere correttamente l'invio e la convalida dell'ajax utilizzando le impostazioni integrate di Yii 2?

Answer 1

Usa beforeSubmit evento, invece di presentare , il beforeSubmit verrà attivato solo una volta che il modulo passa la convalida.

$('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

è possibile utilizzare AjaxSubmitButton.

Il modulo dovrebbe b

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

uso AjaxSubmitButton qui

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

Nel vostro controller

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 ho trovare alcuni interessanti trucchi di validazione JavaScript lato

Così, un javascript pulsante di invio può essere come:

$('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]); 
      }); 
     } 
     } 
    }); 
} 

Attivato da:

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

E il controller azione risponderà con:

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

dettagli su ActiveForm: : validate() può essere trovato here