submit ajax yii2

Yii2-ActiveForm ajax submit

Question

¿Cómo puedo usar ActiveForm con estos requisitos?

• Presentar formulario con ajax.

• Antes de enviar con ajax: compruebe si existe un error.

• Después de enviar: Muestra el error del campo debajo de la entrada del campo si el servidor responde sin éxito el resultado de guardado.

Answer 1

Este es tu formulario a la vista. Prefiero usar diferentes acciones para validar y guardar. Puedes unirlos en un solo método.

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

En la acción de validación debes escribir. Valida su formulario y devuelve la lista de errores al cliente. :

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

Y esto es guardar acción. En validar los datos de entrada para la seguridad:

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

Este código validará su formulario en actionValidate () y. Para enviar su formulario a través de AJAX utilice el evento beforeSubmit. En tu archivo javascript escribe:

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

Eso es todo.

Answer 2

Presentar formulario con ajax. Antes de enviar con ajax: compruebe si existe un error. yii muestra error si hay alguno por defecto ....... :)

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>