web-dev-qa-db-fra.com

Yii2 - ActiveForm ajax soumettre

Comment puis-je utiliser ActiveForm avec ces exigences?

  • Soumettez le formulaire avec ajax.

  • Avant de soumettre avec ajax: Vérifiez si l'erreur se termine.

  • Après la soumission: Afficher l'erreur du champ sous l'entrée du champ si le serveur ne répond pas à l'enregistrement du résultat.

26
Văn Thái Nguyễn

Voici votre formulaire en vue. Je préfère utiliser différentes actions pour la validation et la sauvegarde. Vous pouvez les joindre en une seule méthode.

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

Dans l'action de validation, vous devez écrire. Il valide votre formulaire et renvoie la liste des erreurs au 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);
    }
}

Et c'est une action de sauvegarde. Pour valider les données d'entrée pour la sécurité:

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

Ce code validera votre formulaire dans actionValidate () et. Pour soumettre votre formulaire via AJAX utilisez l'événement beforeSubmit. Dans votre fichier javascript, écrivez:

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

C'est tout.

24
Pikaev Viktor

Soumettez le formulaire avec ajax. Avant de soumettre avec ajax: Vérifiez si l'erreur se termine. yii erreur d'affichage le cas échéant par défaut ....... :)

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>
9
Kalpesh Desai