绑定动态生成的表单以进行Ajax验证? [英] Bind dynamically generated forms for ajax validation?

问题描述

我正在使用JS在页面上动态生成许多表单.

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

每种形式都对应一个yii2模型(为每个属性设置了规则).

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

我希望每种形式都可以验证所有元素(名称，电子邮件文本输入)以使用ajax进行验证(就像我通常只有一种形式一样).

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

我发现使用这里指出的方法: https://yii2-cookbook.readthedocs.io/forms-activeform-js/

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

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

给出JS错误:

 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)

有没有办法将动态生成的表单绑定到yii2验证? (不仅是单个字段，而是整个表单，每个表单都有唯一的ID).

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

不幸的是，关于Yii2 js表单验证的文档似乎并不是很多

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

非常感谢

g

推荐答案

简而言之，您可以通过以下步骤利用本地gii生成的活动表单来完成模态验证:

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

在位置创建文件: 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>';
        }
    });
});

更新位置文件: 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',
    ];

}

将代码块添加到文件位置: 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();
?>

添加到控制器: 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
        ]);
    }
}

您的表单文件位置: 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.

查看全文