I am working on creating forms in modal windows in Yii2, and I had a problem when the standard ajax validation of a Yii form does not work when the form is in the modal loading window.
To be clear, ajax form validation is triggered for each field when the filed loses focus. This is a standard Yii form validation, so I test the form in modal mode by clicking on the desired field and then clicking on the field. This triggers a Yii ajax check and displays a red error message in the field, which indicates that the field "cannot be empty."
Again, my problem is that sometimes ajax checking is done, and sometimes not.
I managed to catch a problem related to where the modal code is located on the page, but it makes no sense to me how the following will affect the behavior of the ajax validation of the form in the modal.
First I will show you the code that works correctly. Validating a Yii form works as expected in a form in a 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>
What should be noted in the above code:
1) This is my category / index view, so it has a create button, a modal boot code, and then a category grid of Yii categories.
2) The create button has a class of btn-ajax-modal . This class is identified by the JS function, which uses other button attributes to display the modal widow and load the form contents into the modal. The value attribute of the button defines the model and shape to be loaded.
Here is a JS function that handles the display of modality and loads 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 fine, and I hope this helps others!
BUT ... if I made some very simple changes to the above code, the validation of the ajax form no longer works, and I have no idea why.
First change:
1) Move the modal boot code below the gridview code, and the ajax check 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 will terminate the validation of the ajax form. The modal shows and loads the correct form, but ajax form validation does not work when I give and remove focus to the desired field.
And he becomes even more bizarre ...
Second change:
2) Instead of moving the modal code below the grid code, just remove the entire gridview, 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 modal form to stop working.
WHAT ON THE EARTH? How to remove gridview, which is absolutely not connected with modal / form installation, causes ajax form validation to stop working?
I see no errors in the browser console, no errors in the Yii debug module. But for some reason, checking the ajax field is not displayed.
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 kind of strange Yii2 error if I lose consciousness or if there is a logical explanation for this.
If anyone has ideas, answers or suggestions, please share! And thanks for brainstorming with me!