- Введение
- XML-файл формы в Joomla4
edit.phpфайл шаблона Joomla4
- Файл
joomla.asset.json - Файл JavaScript шаблона Joomla4
Введение
Этот код был создан для приложения на Joomla4, в котором есть события с датами начала и окончания, которые должны быть разделены менее чем на 30 дней. Код предназначен для формы ввода данных Администратором сайта.
В качестве аргумента в этом примере события описываются как лагеря (camps). Это могут быть фестивали, скачки, конференции или что-то еще, что требует определения даты их начала и окончания.
XML-файл формы в Joomla4
Даты являются обязательными полями (required="required") ввода дат (type="calendar"). Обратите внимание, что проверка передается как пользовательский класс, начинающийся с validate-.
<!-- ... other elements ... -->
<field
name="date_start"
type="calendar"
label="COM_THINGY_CAMP_DATE_START_LABEL"
description="COM_THINGY_CAMP_DATE_START_DESC"
class="w-25 validate-date_start"
required="required"
>
</field>
<field
name="date_end"
type="calendar"
label="COM_THINGY_CAMP_DATE_END_LABEL"
description="COM_THINGY_CAMP_DATE_END_DESC"
class="w-25 validate-date_end"
required="required"
>
</field>
<!-- ... other elements ... -->edit.php файл шаблона Joomla4
Подгрузка JavaScript файла в вывод шаблона Joomla4
Файл шаблона формы обычно edit.php. Это место, чтобы загрузить необходимые JavaScript скрипты. После операторов use вставьте:
$wa = $this->document->getWebAssetManager();
$wa->useScript('keepalive')
->useScript('form.validate')
->useScript('com_thingy.camp');Чтобы это сработало, вам нужно настроить установку расширения Joomla4 так, чтобы ресурсы js и css попали в папку media сайта с файлом joomla.asset.json. Как этого добиться, вам придётся посмотреть в другом месте. В этом случае загруженный файл JavaScript должен попадать в папку media/com_thingy/js/camp.js.
Языковые константы для JavaScript шаблона Joomla4
Сценарий проверки JavaScript содержит несколько предупреждающих сообщений, помимо сообщений по умолчанию, которые появляются для недопустимых полей. Переводы предупреждающих сообщений также включены в edit.php файл:
Text::script('COM_THINGY_JS_ERROR_DATES_WRONG_ORDER', true);
Text::script('COM_THINGY_JS_ERROR_DATES_TOO_FAR_APART', true);Эти строки создают встроенные операторы скрипта, содержащие пары ключа и перевода. Фактические переводы содержатся в вашем языковом ini-файле вместе со всеми другими переводами строк вашего расширения.
Валидация формы с помощью JavaScript шаблона Joomla4
Для работы кода JavaScript тег формы form должен содержать класс class="form-validate":
<form action="<?php echo Route::_('index.php?option=com_thingy&view=camp&layout=edit&id=' . (int) $this->item->id); ?>"
class="form-validate" method="post" name="adminForm" id="adminForm">Файл joomla.asset.json
Файл joomla.asset.json находится в каталоге media с медиафайлами компонента (media/com_thingy/joomla.asset.json) и, помимо прочего, содержит следующее:
,{
"name": "com_thingy.camp",
"type": "script",
"uri": "com_thingy/camp.js",
"dependencies": [
"core"
],
"attributes": {
"defer": true
}
}Файл JavaScript шаблона Joomla4
В этом примере события должны происходить с интервалом менее 30 дней. Это может быть настраиваемое значение, но здесь оно жестко закодировано.
// ===== validation =====
document.addEventListener('DOMContentLoaded', (event) => {
document.formvalidator.setHandler('date_start', function(value) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
return regex.test(value);
});
document.formvalidator.setHandler('date_end', function(value) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
if (!regex.test(value)) {
return false;
}
let date_start = document.getElementById('jform_date_start').value;
if (value <= date_start) {
alert (Joomla.Text._('COM_THINGY_JS_ERROR_DATES_WRONG_ORDER'));
return false;
}
date_start = date_start.split('-');
date_start = new Date(date_start[0], date_start[1] - 1, date_start[2]); // milliseconds
let date_end = value.split('-');
date_end = new Date(date_end[0], date_end[1] - 1, date_end[2]); // milliseconds
let diff = (date_end - date_start)/(1000*60*60*24);
if (diff > 30) {
alert (Joomla.Text._('COM_THINGY_JS_ERROR_DATES_TOO_FAR_APART'));
return false;
}
return true;
});
//... more validation rules ...
});Вы, вероятно, могли бы улучшить это. Сделать регулярное выражение даты глобальной константой? Сделать продолжительность события (разницу между датами начала и окончания) настраиваемым? Ну та возьмите и сделайте это! ;)
Перевод с английского:
https://docs.joomla.org/Joomla_4_Tips_and_Tricks:_Check_two_dates
