Yii2 activeform ajax submit и проверка

В настоящее время для одновременного представления и проверки ajax. Я использую пользовательскую функцию, например:

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

    });

И вот php-сторона, для проверки моей конфигурации выглядит так:

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

Я уверен, что это не лучший способ добиться того, что мне нужно. Особенно эта часть, которую я использую для предотвращения отправки в случае ошибки проверки:

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

Любые предложения? Как добиться правильной подачи и проверки ajax с помощью встроенных настроек Yii 2?

Ответ 1

Используйте beforeSubmit событие вместо submit, beforeSubmit будет запускаться только после того, как форма пройдет проверку.

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

Ответ 2

вы можете использовать AjaxSubmitButton.

Ваша форма должна быть b

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

используйте AjaxSubmitButton здесь

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

В вашем контроллере

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

Ответ 3

Здесь Я нашел несколько интересных трюков проверки javascript-стороны

Итак, кнопка отправки javascript может быть такой:

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

срабатывает:

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

И контроллер действия ответит:

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

Подробности об ActiveForm:: validate() можно найти здесь