Yii2:Bootstrap Modal Form Validation(Ajax)-对异常行为有何见解? [英] Yii2: Bootstrap Modal Form Validation (Ajax) - any insight on strange behavior?

问题描述

我一直在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网格视图.

2)创建按钮具有btn-ajax-modal类.此类由JS函数标识，该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错误，是否失去理智或对此是否有逻辑解释.

如果任何人有任何想法，答案或建议，请分享！谢谢您与我集思广益！

解决方案

此挑战的解决方案是确保模式窗口中的表单具有id属性.表单ID对于Yii2 ajax验证正常运行很重要.

I've been working on having forms in modal windows in Yii2, and I've been having an issue where the standard Yii form ajax validation is not working when the form is inside a bootstrap modal window.

To be clear, the ajax form validation is triggered for each field when the filed looses focus. This is the standard Yii form validation, so I'm testing the form in the modal by clicking into a required field, and then clicking out of the field. This triggers the Yii ajax validation and should display a red error message under the field that states the "'field' cannot be blank."

Again, my issue is that sometimes the ajax validation works and sometimes it does not.

I managed to trap the issue to being related to where the modal code is placed on the page, but it makes no sense to me how the following would affect the ajax validation behavior of the form in the modal.

First I'll show you the code that works properly. The Yii form validation works as expected on the form in the modal window.

<?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>

Things to note in the code above:

1) This is my category/index view, so it has a create button, the bootstrap modal code, and then the Yii gridview of categories.

2) The create button has the btn-ajax-modal class. This class is identified by a JS function that uses the other button attributes to display the modal widow and load the form content in the modal. The button value attribute identifies the model and form that should be loaded.

Here is the JS function that handles showing the modal and loading the form:

$('.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);
});

So, all of the above code works perfectly, and my hope is that this will help others!

BUT... if I make some very simple changes to the above code, the ajax form validation no longer works, and I have no idea why.

First change:

1) Move the bootstrap modal code below the gridview code, and the ajax validation no longer works.

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

It makes no sense to me why moving the modal code below the gridview code would break the ajax form validation. The modal still displays and loads the proper form, but the ajax form validation does not trigger when I give and remove focus to a required field.

And it gets even more bizarre ...

Second change:

2) Instead of moving the modal code below the gridview code, just delete the gridview entirely, including 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>

This change also causes the ajax form validation for the form in the modal to stop working.

WHAT ON EARTH? How can removing the gridview, which has absolutely nothing to do with the modal/form setup cause the ajax form validation to stop working?

I'm seeing no errors in the browser console, no errors in the Yii debug module. But for some reason, the ajax field validation is not displaying.

Sorry for such a long post, but I wanted to be as clear and specific as possible. I'm not sure if this is some strange Yii2 bug, if I'm loosing my mind, or if there is a logical explanation for this.

If anyone has any ideas, answers or suggestions, please share! And thank you for brainstorming with me!

解决方案

The solution to this challenge was to make sure that the form in the modal window has an id attribute. The form id is important for Yii2 ajax validation to function properly.

这篇关于Yii2:Bootstrap Modal Form Validation(Ajax)-对异常行为有何见解?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！