У меня есть в SiteControlle.php action который возвращает через renderAjax представление формы в представление модального окна через метод fetch.
И я не знаю куда делать валидация формы на клиенте , маска у input пропала для телефона
В чем может быть дело ?
// Представление модального окна
modal.php
<?php
/** @var yii\web\View $this */
/** @var string $content */
$modal = Yii::$app->params['modal']['success_text'];
?>
<div id="contact-modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 class="modal__success"><?=$modal?></h2>
</div>
</div><?php
/** @var yii\web\View $this */
/** @var string $content */
$modal = Yii::$app->params['modal']['success_text'];
?>
<div id="contact-modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 class="modal__success"><?=$modal?></h2>
</div>
</div>
//views/site/common/form_check.php представление формы
spoiler
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
// // Подключаем необходимые скрипты
// $this->registerJsFile('@web/assets/.../yii.activeForm.js', ['depends' => JqueryAsset::class]);
// JqueryAsset::register($this);
?>
<div class="form">
<?php $form = ActiveForm::begin([
'id' => 'contact-form',
// 'enableAjaxValidation'=>true,
// 'enableClientValidation' => true,
// 'enableAjaxValidation' => true,
'action' => ['check-success?id_program=1&type_check=1'],
]); ?>
<div class="form__name">
<?= $form->field($model, 'name')->textInput(['placeholder' => 'ФИО'])->label(false) ?>
</div>
<div class="form__phone">
<?= $form->field($model, 'phone')->widget(\yii\widgets\MaskedInput::class, [
'mask' => '+7 (999) 999-99-99',
'options' => [
'placeholder' => 'Телефон',
'class' => 'form-control',
],
])->label(false)
?>
</div>
<div class="form__email">
<?= $form->field($model, 'email')->input('email', ['placeholder' => 'Email'])->label(false) ?>
</div>
<div class="form__subject">
<?= $form->field($model, 'subject')->textInput(['placeholder' => 'Предмет для изучения'])->label(false) ?>
</div>
<div class="form__button">
<!-- закомментировал кнопку первую дабы избежать повторной отправки данных формы -->
<!-- <? //= Html::submitButton('Отправить', ['class' => 'btn btn-success', 'id' => 'submit-button' ,'name' => 'contact-button'])
?> -->
<?= Html::button('Отправить', ['class' => 'btn btn-success', 'id' => 'submit-button']) ?>
</div>
<?php ActiveForm::end(); ?>
<?= Html::tag('a', 'Нажимая эту кнопку, вы соглашаетесь с Политикой конфиденциальности персональных данных', ['href' => 'https://example.com/', 'class' => 'form__condition', 'target' => '_blank']) ?>
</div>
// views/site/index.php - cюда я с помощью метода render подключаю представление секций Сайта
spoiler
<?php
/** @var yii\web\View $this */
/* @var $model app\models\EntryForm */
// $this->title = 'College'; // заголовк страницы
use app\widgets\ModalWidget;
use yii\helpers\Html;
?>
<?=$this->render('promo');?>
<?=$this->render('advantages');?>
<?=$this->render('preparation');?>
<?=$this->render('education');?>
<?=$this->render('marquee');?>
<?=$this->render('get');?>
<?=$this->render('bid');?>
<?=$this->render('marquee');?>
<?=$this->render('reviews');?>
<!-- <?//=$this->render('common/modal', ['model' => $model]);?> -->
<?=$this->render('common/modal');?>
// контроллер
spoiler
//Общая форма для заказов
public function actionShowCommonCheck()
{
//// show-common-check
$model = new ContactForm();
return $this->renderAjax('common/form_check', ['model' => $model]);
}
public function actionIndex()
{
return $this->render(
'index'
);
}
// здесь скрипт отвечающий за открытие модального окна по нажатию кнопки у которой есть data-url ссылающийся на соответсвубщий action для запроса рендера вида формы
вот код кнопки с атрибут data-url в котом ссылка на action возвращаюзий предсмтавление формы
<div class="button">
<?= Html::a('Подать заявку', '#', ['class' => 'modal-trigger modal-show header__call', 'data-url'=>'/site/show-common-check']); ?>
</div>
spoiler
import { sendForm } from './send.js'
export function modalShow() {
const modal = document.getElementById('contact-modal');
const openButtons = document.querySelectorAll('.modal-show');
const closeButton = modal.querySelector('.close');
const modalContent = modal.querySelector('.modal-content');
// const form = modal.querySelector('form');
// Открытие модального окна
openButtons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault();
modal.classList.add('show');
const url = button.dataset.url; // URL передается через data-url
loadContent(url); // Вызываем функцию загрузки контента
});
});
// Закрытие модального окна
closeButton.addEventListener('click', function () {
closeModal();
});
modal.addEventListener('click', function (event) {
if (!modalContent.contains(event.target)) {
closeModal();
}
});
// Функция закрытия модального окна
function closeModal() {
modal.classList.remove('show');
// Очистка формы
// form.reset();
}
// Функция для загрузки контента через fetch
async function loadContent(url) {
try {
const response = await fetch(url, { method: 'GET' });
if (!response.ok) throw new Error(`Ошибка загрузки данных: ${response.statusText}`);
const html = await response.text(); // Получаем HTML-код
modalContent.innerHTML = html; // Вставляем HTML в модальное окно
// Повторная инициализация валидации (Yii2 ActiveForm)
const formElement = document.querySelector('#contact-form');
if ( typeof yii !== 'undefined' ) {
console.log(yii);
yii.activeForm( formElement.innerHTML, []);
console.log('ActiveForm инициализирован.');
}else{
console.error('ActiveForm не инициализирован.');
}
sendForm(modal);
} catch (error) {
console.error('Ошибка загрузки:', error);
modalContent.innerHTML = `<p>Ошибка загрузки данных. Пожалуйста, попробуйте позже.</p>`;
}
}
}
и вот в этом коде
// Повторная инициализация валидации (Yii2 ActiveForm)
const formElement = document.querySelector('#contact-form');
if ( typeof yii !== 'undefined' ) {
console.log(yii);
yii.activeForm( formElement.innerHTML, []);
console.log('ActiveForm инициализирован.');
}else{
console.error('ActiveForm не инициализирован.');
}
И вот тут не происходит повторой инициализации валидации.GPTchat такое мне предлоджил , так как рендер формы в представление модального окна идет через renderAjax
У меня не находит yii,activeForm(выдает в консоли - yii.activeForm is not a function)
Я не знаю возможно это не нужно
Средний
