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）将bootstrap模态代码移动到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验证正常运行非常重要。

Answer 2

没有id属性，Ajax验证将无法工作。打开Loading "cache-busting.js" tasks...ERROR >> ReferenceError: primordials is not defined并为ActiveForm设置一个ID，如下所示：

category/_form.php

Yii2：Bootstrap模态表单验证（Ajax） - 对奇怪行为的任何见解？

2 个答案: