Доброго времени, форумчане!
Столкнулся с такой проблемой.
Загружаю главную страничку из левого меню по ajax.
На страничке есть модальное окно с формой, валидируемой по ajax.
Так вот, если эту страницу загружать НE по ajax, то ajax-валидация в форме работает, а если по ajax - не работает.
Страница, подгружаемая по ajax:
<main class="employees" id='employees'>
<h2>Сотрудники</h2>
<a class="button-primary buttonLarg smPW" modal="14">Добавить сотрудника</a>
</main>
<!-- модальное окно - добавить сотрудника -->
<div modal="14" class="modal" id="modal14">
<div maxWidth="715px">
<?php $employee = new Employee() ?>
<?php $form = ActiveForm::begin([
'id' => 'create_employee',
'action' => '/employee/update',
'enableAjaxValidation' => true,
'options'=> ['class'=> 'm16'],
]); ?>
<h3 class="center mb24">Добавить сотрудника</h3>
<div class="w100 center">
<div class="m16 mb16" maxWidth="345px">
<div class="w100">
<div class="input">
<?= $form->field($employee, 'name',
[
'template' => '{input}{error}',
])->textInput(['maxlength' => true, 'value'=> '', 'autocomplete'=>"off"])->label(false) ?>
<label for="">Имя *</label>
</div>
</div>
</div>
</div>
<div class="m24">
<div>
<input type="submit" class="button-primary"/>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
<?php $this->registerJs("
$(document).ajaxStop(function() {
$(document).on('afterValidate','#create_employee', function (event, messages, errorAttributes) {
// сдесь скрипт обработки ошибок валидации
$.each(messages, function(key, message){
...
})
return true;
})
});", yii\web\View::POS_READY);
?>
Экшн для ajax валидации:
public function actionUpdate()
{
// осуществляем ajax валидацию полей
$employee = new Employee();
if(Yii::$app->request->isPost) {
$employee->load(Yii::$app->request->post());
if(Yii::$app->request->isAjax) { // если валидация по ajax
Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($employee);
}
if($employee->save())
Yii::$app->session->setFlash('success', 'Данные сотрудника обновлены');
else
Yii::$app->session->setFlash('error', 'Данные сотрудника обновить не удалось');
return $this->redirect(['index']);
}
return $this->render('view', compact('employee'));
}
Ajax валидация формы, загруженной по Ajax
Re: Ajax валидация формы, загруженной по Ajax
Оберните код соответствующим тегом
Re: Ajax валидация формы, загруженной по Ajax
Код: Выделить всё
<main class="employees" id='employees'>
<h2>Сотрудники</h2>
<a class="button-primary buttonLarg smPW" modal="14">Добавить сотрудника</a>
</main>
<!-- модальное окно - добавить сотрудника -->
<div modal="14" class="modal" id="modal14">
<div maxWidth="715px">
<?php $employee = new Employee() ?>
<?php $form = ActiveForm::begin([
'id' => 'create_employee',
'action' => '/employee/update',
'enableAjaxValidation' => true,
'options'=> ['class'=> 'm16'],
]); ?>
<h3 class="center mb24">Добавить сотрудника</h3>
<div class="w100 center">
<?= $form->field($employee, 'name',
['template' => '{input}{error}',])->textInput(['maxlength' => true, 'value'=> '', 'autocomplete'=>"off"])->label(false) ?>
<label for="">Имя *</label>
</div>
<div class="m24">
<input type="submit" class="button-primary"/>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
<?php $this->registerJs("
$(document).ajaxStop(function() {
$(document).on('afterValidate','#create_employee', function (event, messages, errorAttributes) {
// сдесь скрипт обработки ошибок валидации
$.each(messages, function(key, message){
...
})
return true;
})
});", yii\web\View::POS_READY);
?>
Экшн для ajax валидации:
public function actionUpdate()
{
// осуществляем ajax валидацию полей
$employee = new Employee();
if(Yii::$app->request->isPost) {
$employee->load(Yii::$app->request->post());
if(Yii::$app->request->isAjax) {
Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($employee);
}
if($employee->save())
Yii::$app->session->setFlash('success', 'Данные сотрудника обновлены');
else
Yii::$app->session->setFlash('error', 'Данные сотрудника обновить не удалось');
return $this->redirect(['index']);
}
return $this->render('view', compact('employee'));
}
Re: Ajax валидация формы, загруженной по Ajax
1. Как загружаете страницу?
2. Какие ошибки есть в консоли браузера?
2. Какие ошибки есть в консоли браузера?
Re: Ajax валидация формы, загруженной по Ajax
Ошибок не наблюдается, а вот в загрузке как раз и есть разница.
При стандарартном обновлении get-запросом страницы (содержащей модальное окно с формой), форма при отправке обращается к экшн по ajax - оператор validate выполняется и ошибки ловятся в генерируемом событии afterValidate.
Но если страницу загрузить по ajax (из бокового меню). то при отправке формы, она обращается к экшн не по ajax а по простому post-запросу и , соответсвенно, оператор validate пропускается. Как я понимаю, ajax валидация не происходит, а сразу отправляется форма.
В форме указана опция enableAjaxValidation=true и предполагалось, что в обоих случаях будет происходить ajax валидация.
При стандарартном обновлении get-запросом страницы (содержащей модальное окно с формой), форма при отправке обращается к экшн по ajax - оператор validate выполняется и ошибки ловятся в генерируемом событии afterValidate.
Но если страницу загрузить по ajax (из бокового меню). то при отправке формы, она обращается к экшн не по ajax а по простому post-запросу и , соответсвенно, оператор validate пропускается. Как я понимаю, ajax валидация не происходит, а сразу отправляется форма.
В форме указана опция enableAjaxValidation=true и предполагалось, что в обоих случаях будет происходить ajax валидация.
Re: Ajax валидация формы, загруженной по Ajax
можно переопределить событие submit в js, чтобы форма отправлялась только через Ajax