Bind dynamically generated forms for ajax validation?

Question

I am generating many forms on a page dynamically using JS.

Each form corresponds to a yii2 model (which has its rules set up for each attribute).

I would like each form to validate all elements (name, email text inputs) to validate with ajax (as they would normally do as if I only had one form).

I am finding that using the method pointed out here: https://yii2-cookbook.readthedocs.io/forms-activeform-js/

`$('#contact-form').yiiActiveForm('validateAttribute', 'contactform-name');`

gives JS error:

 yii.activeForm.js:276 Uncaught TypeError: Cannot read property 'attributes' of undefined
    at jQuery.fn.init.find (yii.activeForm.js:276)
    at jQuery.fn.init.validateAttribute (yii.activeForm.js:268)
    at jQuery.fn.init.$.fn.yiiActiveForm (yii.activeForm.js:16)
    at HTMLInputElement.<anonymous> (search-follow.js:130)

Is there a way to bind dynamically generated forms to yii2 validation? (not just individual fields but rather entire forms, each with a unique ID).

The documentation on Yii2 js form validation seems not so much unfortunately

help much appreciated

g

Answer 1

In short you can accomplish modal validation by utilizing the native gii generated activeforms using the following steps:

Create File at Location: app/web/js/ajax-modal-popup.js

$(function(){
     $(document).on('click', '.showModalButton', function(){
        if ($('#modal').data('bs.modal').isShown) {
            $('#modal').find('#modalContent')
                .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {
            $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
    });
});

Update File at Location: app/asset/AppAsset.php

class AppAsset extends AssetBundle {

    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        'js/ajax-modal-popup.js', //<<<------- Register the script.
    ];
    public $depends = [
        'yii\web\YiiAsset',
    ];

}

Add code chunk to file location: app/views/index.php

<?php
    Html::button('Close', 
      ['value' => Url::to(['ticket/close', 'id'=>$model->ticket_id]), 
      'class' => 'showModalButton btn btn-success']
    );

    Modal::begin([
        'header' => '<h2>Ticket Manager</h2>',
        'id' => 'modal',
        'size' => 'modal-md',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
?>

Add to Controller: app/controllers/ticketController.php

public function actionClose($id) {
    $model = $this->findModel($id);
    $model->scenario = 'close'; //Applied by Ticket model rules.
    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        $model->record_void = 1;
        $model->save();
        return $this->redirect(['index']);
    }elseif (Yii::$app->request->isAjax) {
        return $this->renderAjax('close', [
            'model' => $model
        ]);
    } else {
        return $this->render('close', [
            'model' => $model
        ]);
    }
}

Your Form File Location: app/views/ticket/close.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\Ticket */
/* @var $form ActiveForm */
?>
<div class="ticket-_close">
<h3>Close Ticket</h3>
<?php
    $form = ActiveForm::begin(['options' => [
        'id' => 'takeModal',
        'enableClientValidation' => true,
        'enableAjaxValidation' => true,
    ]]);?>

        <?= $form->field($model, 'ticket_id')->textInput(['readonly' => true, 'value' => $model->ticket_id]) ?>
        <?= $form->field($model, 'problem') ?>
        <?= $form->field($model, 'solution') ?>

        <div class="form-group">
            <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
        </div>
    <?php ActiveForm::end(); ?>

</div><!-- ticket-_close -->

See below article for additional details.

http://www.yiiframework.com/wiki/806/render-form-in-popup-via-ajax-create-and-update-with-ajax-validation-also-load-any-page-via-ajax-yii-2-0-2-3/

Answer 2

I put shortly some code snippets which do ajax form operations using Yii 2.

View (_ajaxForm.php: ajax form)

<?php $form = \yii\widgets\ActiveForm::begin([
    // pay attention this config.
    'id' => 'account-form',
    'enableClientValidation' => true,
    'enableAjaxValidation' => true,
    // validation URL via ajax
    'validationUrl' => \yii\helpers\Url::to(['/account/do-ajax-request', 'userId'=>$model->id, 'op' => 'validate-form']),
]); ?>

<?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>

<?= $form->field($model, 'passwordConfirm')->passwordInput(['maxlength' => true]) ?>

<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

<div class="form-group">
    <?= \yii\helpers\Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>

<?php \yii\widgets\ActiveForm::end(); ?>

<script type="text/javascript">
    $(function () {
        // URL to save form via ajax
        var formSaveUrl='<?= \yii\helpers\Url::to(['/account/do-ajax-request', 'userId'=>$model->id, 'op' => 'save-form']) ?>';

        // post form via ajax to save
        $(document).on('beforeSubmit', '#account-form', function () {
            $.post(formSaveUrl, $(this).serialize(), function (data) {
                alert(data.message);
            });
            return false;
        });

    });
</script>

Controller (AccountController.php: function which performs ajax operations)

public function actionDoAjaxRequest($userId, $op)
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

    $model = $this->findModel($userId);
    $model->load(Yii::$app->request->post());

    // validate form
    if ($op == 'validate-form') {
        $data = \yii\widgets\ActiveForm::validate($model);
    // save form
    } else if ($op == 'save-form') {
        if ($model->save()) {
            $data['result'] = true;
            $data['message'] = 'Success!';
        } else {
            $data['result'] = false;
            $data['message'] = 'Failed!';
        }
    }

    return $data;
}