Печать

Настройка Chronoforms5 и некоторые исправления

 

Chronoforms — не слишком простой, но достаточно удобный компонент для создания форм, если в нем разобраться.

У Cronoforms5 (для Joomla 2.5–3.0) стало еще больше полезных возможностей. Появились: несколько вариантов настройки антиспама; пользовательская настройка обработчиков событий некоторых элементов форм стала более удобной; возможность добавления стилей в меню настройки почти каждого элемента.

Но есть и маленький минус — не помешала бы хорошая русификация. Я пока пользуюсь самописным русификатором.

Итак, начнем разбираться.

1. Установили компонент, плагин и модуль Chronoforms5
.

 2. Включаем «Chronoforms5» в менеджере плагинов.
Теперь наши формы будут отображаться на сайте, в том числе выводимые  на страницу  с помощью кода вставки «{chronoforms5}my_form_name{/chronoforms5}»


3. Убираем валидацию установки и копирайт.
Если зайти в админке Joomla в «Компоненты» — «Chronoforms5». Видим вот такое сообщение сверху:



Собственно, от него нет никакого вреда — просто раздражает.
Уберем валидацию установки сразу везде.
Для этого нужно сделать исправления в двух файлах:

a)  components/com_chronoforms5/chronoforms/chronoforms.php. У меня это 24 строка:

function _validated($params){
                  if((bool)$params->get('validated', 0) === true){
                             return true;
                  }
                  return false;
      }

Меняем код на такой:

 function _validated($params) {
                  return true;
      }

б)  administrator/components/com_chronoforms5/chronoforms/chronoforms.php. У меня это 748 строка.

function _validated(){
parent::_settings('chronoforms');
if(isset($this->data['Chronoforms']['validated']) AND (int)$this->data['Chronoforms']['validated'] == 1){
return true;
}
return false;
}

 Заменить на:

function _validated(){
parent::_settings('chronoforms');
return true;
}

Теперь и в админке, и на странице сайта все красиво. 

4. Русифицируем всплывающие подсказки.
В адмике зашли в «Компоненты» — «Chronoforms5». В менюшке сверху жмем «Demo». У нас появились аж 10 заботливо подготовленных разработчиками форм. Публикуем на сайте любую из них. Жмем кнопку формы «submit». Видим красивый тултип, но, к сожалению, не по-русски. Если с русификацией компонента в админке мы можем и потерпеть, то заказчик нерусские всплывающие подсказки навряд ли потерпит. Чтобы русифицировать туллтипы, нам нужен файл

libraries/cegcore/assets/gplugins/gvalidation/gvalidation.js.

Там, начиная со строки 15 прописаны значения всех наших дефолтных туллтипов. Переводим их, сохраняем, проверяем. Теперь наши туллтипы на русском языке. 
 

5. Настраиваем плавный скроллинг до всплывающей подсказки.
Скроллим страницу сайта как можно ниже, так, чтобы только была возможность нажать кнопку «submit». Жмем на нее и видим следующее:

Так что мы увидели? — Ничего. Страницу дернуло вверх, курсор на самом первом пустом поле (оно обязательное). Нашей, такой красивой всплывающей подсказки нет. Ее мы увидим если еще чуть отскроллим страницу вверх.


P.S: Форма у меня уже была. Только восстановила ее на тестовом сайте. Поэтому, если у вас такой нет, придется поверить мне наслово.

Проблема решается в этом же файле 

libraries/cegcore/assets/gplugins/gvalidation/gvalidation.js

 в строке 203, в самом конце функции 

$.fn.show_gvalidate_error

. После выражения

$this.focus();

вставляем строку:

$('html, body').stop(false,true).animate({ scrollTop: $('.gtooltip').offset().top - 100}, 1100 );

 P.S: Значения «100» и «1100» взяты наобум. Вы можете поставить свои.

В результате это должно выглядеть вот так:

Сохраняем, проверяем. Теперь, при отправке формы с пустыми полями, страница должна плавно отскроллиться до всплывающей подсказки, при этом, подсказка должна остаться в поле зрения. 

6. Валидация кириллицы в текстовых полях.
Продолжаю мучить свою форму. Вы можете воспользоваться любой, предложенной разработчиками демкой. Заполнила первое обязательное текстовое поле «Имя». Нажала «отправить». Получила следующее:

Дело в том, что у меня содержимим данного поля должны быть только буквы алфавита («мастер формы» — «редактирование поля» — вкладка «validate»).

Под алфавитом, естесственно, имеется ввиду латиница. Поэтому русский за-просто-так не пройдет.

Снова открываем 

libraries/cegcore/assets/gplugins/gvalidation/gvalidation.js

.В самом начале прописана валидация текстовых полей

jQuery.gvalidation = {
rules : {
required : /[^.*]/,
alpha : /^[a-z ._-]+$/i,
alphanum : /^[a-z0-9 ._-]+$/i,
digit : /^[-+]?[0-9]+$/,
nodigit : /^[^0-9]+$/,
nospace : /^[^ ]+$/,
number : /^[-+]?\d*\.?\d+$/,
email : /^([a-zA-Z0-9_\.\-\+%])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
image : /.(jpg|jpeg|png|gif|bmp)$/i,
phone : /^\+{0,1}[0-9 \(\)\.\-]+$/, // alternate regex : /^[\d\s ().-]+$/,/^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/
phone_inter : /^\+{0,1}[0-9 \(\)\.\-]+$/,
url : /^(http|https|ftp)\:\/\/[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z0-9\-\._\?\,\'\/\\\+&%\$#\=~])*$/i
},

 

Нас интересуют строчки alpha и alphanum. Добавляем туда кириллицу:

alpha : /^[a-zA-Zа-яА-Я._-]+$/i,
alphanum : /^[a-zA-Zа-яА-Я0-9 ._-]+$/i,

И теперь русский алфавит наша форма пропускает.

Для украинского языка нужно сделать так

alpha : /^[а-яіїєґА-ЯІЇЄҐ._-]+$/i,
alphanum : /^[а-яіїєґА-ЯІЇЄҐ0-9 ._-]+$/i,

А чтобы можно было писать слова с пробелами нужно добавить \s, то есть должно получиться

alpha : /^[а-яіїєґА-ЯІЇЄҐ._-\s]+$/i,
alphanum : /^[а-яіїєґА-ЯІЇЄҐ0-9 ._-\s]+$/i,

На этом основную настройку Cronoforms5 можно считать законченной.

 

По материалам: s-elena.name

Добавить комментарий


Защитный код
Обновить