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 表单验证在模态窗口中的表单上按预期工作.

<div class="category-index"><h1><?= Html::encode($this->title) ?></h1><?= Html::button('创建类别', ['类' =>'btn btn-success btn-ajax-modal','价值' =>Url::to('/category/create'),'数据目标' =>'#modal_category',]);?><?php模态::开始(['id' =>'modal_category','标题' =>'<h4>类别</h4>',]);echo '<div class="modal-content"></div>';模态::结束();?><?= GridView::widget(['数据提供者' =>$数据提供者，'过滤器模型' =>$搜索模型，'列' =>[['类' =>'yiigridSerialColumn'],'ID'，'标题'，['类' =>'yiigridActionColumn'],],]);?>

上面代码中需要注意的地方:

1) 这是我的类别/索引视图，所以它有一个创建按钮、引导模式代码，然后是类别的 Yii 网格视图.

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 modal 代码移到 gridview 代码下方，ajax 验证不再起作用.

<h1><?= Html::encode($this->title) ?></h1><?= Html::button('创建类别', ['类' =>'btn btn-success btn-ajax-modal','价值' =>Url::to('/category/create'),'数据目标' =>'#modal_category',]);?><?= GridView::widget(['数据提供者' =>$数据提供者，'过滤器模型' =>$搜索模型，'列' =>[['类' =>'yiigridSerialColumn'],'ID'，'标题'，['类' =>'yiigridActionColumn'],],]);?><?php//*** 查看模式代码现在低于 GRIDVIEW 代码模态::开始(['id' =>'modal_category','标题' =>'<h4>类别</h4>',]);echo '<div id="modalContent"></div>';模态::结束();?>

为什么将模态代码移动到 gridview 代码下方会破坏 ajax 表单验证对我来说毫无意义.模态仍然显示并加载正确的表单，但是当我将焦点移到必填字段时不会触发 ajax 表单验证.

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

第二个变化:

2) 不将模态代码移动到gridview代码下方，而是完全删除gridview，包括use yiigridGridView;.

<div class="category-index"><h1><?= Html::encode($this->title) ?></h1><?= Html::button('创建类别', ['类' =>'btn btn-success btn-ajax-modal','价值' =>Url::to('/category/create'),'数据目标' =>'#modal_category',]);?><?php模态::开始(['id' =>'modal_category','标题' =>'<h4>类别</h4>',]);echo '<div class="modal-content"></div>';模态::结束();?>

此更改还会导致 modal 中表单的 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 yiihelpersHtml;
use yiihelpersUrl;
use yiigridGridView;
use yiiootstrapModal;    
?>
<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' => 'yiigridSerialColumn'],
            'id',
            'title',
            ['class' => 'yiigridActionColumn'],
        ],
    ]); ?>
</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' => 'yiigridSerialColumn'],
            'id',
            'title',    
            ['class' => 'yiigridActionColumn'],
        ],
    ]); ?>

    <?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 yiigridGridView;.

<?php
use yiihelpersHtml;
use yiihelpersUrl;
use yiiootstrapModal;    
?>
<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屋！