Yii2:Bootstrap模态表单验证(Ajax) - 对奇怪行为的任何见解？

Question

我一直在Yii2中使用模态窗口中的表单,并且我遇到了一个问题,当表单在引导模式窗口内时,标准Yii形式的ajax验证不起作用.

需要明确的是,当字段失去焦点时,会为每个字段触发ajax表单验证.这是标准的Yii表单验证,因此我通过单击所需字段,然后单击该字段来测试模式中的表单.这会触发Yii ajax验证,并应在字段下显示一条红色错误消息,指出"'字段'不能为空."

同样,我的问题是有时ajax验证有效,有时却没有.

我设法将问题陷入与模式代码放置在页面上的位置相关的问题,但是对于我如何影响模式中表单的ajax验证行为没有任何意义.

首先,我将向您展示正常运行的代码.Yii表单验证在模式窗口中的表单上按预期工作.

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\bootstrap\Modal;    
?>
<div class="category-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= Html::button('Create Category', [
        'class' => 'btn btn-success btn-ajax-modal',
        'value' => Url::to('/category/create'),
        'data-target' => '#modal_category',
    ]); ?>

    <?php
    Modal::begin([
        'id' => 'modal_category',
        'header' => '<h4>Category</h4>',
    ]);
    echo '<div class="modal-content"></div>';
    Modal::end();
    ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'title',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>

以上代码中需要注意的事项:

1)这是我的类别/索引视图,因此它有一个创建按钮,引导模态代码,然后是类别的Yii gridview.

2)创建按钮具有btn-ajax-modal类.此类由JS函数标识,该函数使用其他按钮属性来显示模态窗口并在模式中加载窗体内容.按钮值属性标识应加载的模型和表单.

这是处理显示模态和加载表单的JS函数:

$('.btn-ajax-modal').click(function (){
    var elm = $(this),
        target = elm.attr('data-target'),
        ajax_body = elm.attr('value');

    $(target).modal('show')
        .find('.modal-content')
        .load(ajax_body);
});

所以,上面的所有代码都完美无缺,我希望这会有助于其他人!

但是......如果我对上面的代码进行了一些非常简单的更改,那么ajax表单验证将不再有效,我不知道为什么.

第一次改变:

1)将引导模式代码移动到gridview代码下面,并且ajax验证不再起作用.

<div class="category-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= Html::button('Create Category', [
        'class' => 'btn btn-success btn-ajax-modal',
        'value' => Url::to('/category/create'),
        'data-target' => '#modal_category',
    ]); ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'title',    
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

    <?php //*** SEE MODAL CODE IS NOW BELOW GRIDVIEW CODE
    Modal::begin([
        'id' => 'modal_category',
        'header' => '<h4>Category</h4>',
    ]);
    echo '<div id="modalContent"></div>';
    Modal::end();
    ?>

</div>

为什么移动gridview代码下面的模态代码会破坏ajax表单验证是没有意义的.模态仍然显示并加载正确的表单,但是当我将焦点移到必需字段时,ajax表单验证不会触发.

它变得更奇怪......

第二个变化:

2)不要将模态代码移动到gridview代码下面,只需完全删除gridview,包括use yii\grid\GridView;.

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\Modal;    
?>
<div class="category-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= Html::button('Create Category', [
        'class' => 'btn btn-success btn-ajax-modal',
        'value' => Url::to('/category/create'),
        'data-target' => '#modal_category',
    ]); ?>

    <?php
    Modal::begin([
        'id' => 'modal_category',
        'header' => '<h4>Category</h4>',
    ]);
    echo '<div class="modal-content"></div>';
    Modal::end();
    ?>

</div>

此更改还会导致模式中的窗体的ajax表单验证停止工作.

到底怎么回事？如何删除与模态/表单设置完全无关的gridview会导致ajax表单验证停止工作？

我在浏览器控制台中看到没有错误,Yii调试模块中没有错误.但由于某种原因,ajax字段验证没有显示.

很抱歉这么长的帖子,但我希望尽可能清晰明确.我不确定这是否是一个奇怪的Yii2错误,如果我失去了理智,或者是否有合理的解释.

如果有人有任何想法,答案或建议,请分享!谢谢你和我一起集思广益!

Answer 1

解决这个挑战的方法是确保模态窗口中的表单具有id属性.表单ID对于Yii2 ajax验证正常运行非常重要.