我一直致力於在Yii2中使用模態窗口中的窗體，並且當窗體位於引導模態窗口內時，我遇到了標準Yii窗體ajax驗證不起作用的問題。Yii2：Bootstrap模態表單驗證（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錯誤，如果我放棄了我的想法，或者是否有合理的解釋。
如果有人有任何想法，答案或建議，請分享！並感謝您與我一起集思廣益！