Ajax валидация формы, загруженной по Ajax

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
AYAKS88
Сообщения: 10
Зарегистрирован: 2022.02.02, 18:15

Ajax валидация формы, загруженной по Ajax

Сообщение AYAKS88 »

Доброго времени, форумчане!
Столкнулся с такой проблемой.
Загружаю главную страничку из левого меню по 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'));

}
Аватара пользователя
SiZE
Сообщения: 2817
Зарегистрирован: 2011.09.21, 12:39
Откуда: Perm
Контактная информация:

Re: Ajax валидация формы, загруженной по Ajax

Сообщение SiZE »

Оберните код соответствующим тегом
AYAKS88
Сообщения: 10
Зарегистрирован: 2022.02.02, 18:15

Re: Ajax валидация формы, загруженной по Ajax

Сообщение AYAKS88 »

Код: Выделить всё


<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'));

}
Аватара пользователя
SiZE
Сообщения: 2817
Зарегистрирован: 2011.09.21, 12:39
Откуда: Perm
Контактная информация:

Re: Ajax валидация формы, загруженной по Ajax

Сообщение SiZE »

1. Как загружаете страницу?

2. Какие ошибки есть в консоли браузера?
AYAKS88
Сообщения: 10
Зарегистрирован: 2022.02.02, 18:15

Re: Ajax валидация формы, загруженной по Ajax

Сообщение AYAKS88 »

Ошибок не наблюдается, а вот в загрузке как раз и есть разница.
При стандарартном обновлении get-запросом страницы (содержащей модальное окно с формой), форма при отправке обращается к экшн по ajax - оператор validate выполняется и ошибки ловятся в генерируемом событии afterValidate.
Но если страницу загрузить по ajax (из бокового меню). то при отправке формы, она обращается к экшн не по ajax а по простому post-запросу и , соответсвенно, оператор validate пропускается. Как я понимаю, ajax валидация не происходит, а сразу отправляется форма.

В форме указана опция enableAjaxValidation=true и предполагалось, что в обоих случаях будет происходить ajax валидация.
Alex@
Сообщения: 568
Зарегистрирован: 2014.12.16, 09:24

Re: Ajax валидация формы, загруженной по Ajax

Сообщение Alex@ »

можно переопределить событие submit в js, чтобы форма отправлялась только через Ajax
Ответить