2011 21 ноября

AJAX проверка для формы регистрации для Joomla 1.7

AJAX проверка для формы регистрации для Joomla 1.7

Рассмотрим один из примеров использования AJAX технологий с использованием стандартного Mootools 1.3, встроенного в Joomla 1.7, на примере формы регистрации - на лету при вводе проверить, свободны ли имя пользователя и email.

Для Joomla 1.5 коллега SmokerMan уже приводил пример, но нам он не подходит по причине другой версии mootools и мы хотим чуть расширить возможности (по этой же причине ни в коем случае (irony) не читайте эту статью http://docs.joomla.org/Ajax_using_MooTools, поскольку авторы сами предупреждают "This article applies to Joomla! 1.5 only as Joomla! 1.6 ships with a later version of MooTools which has a different way of handling Ajax requests.")

Посмотреть в работе можно здесь - http://beliyadm.rcoi.net/joomla17demo/index.php/using-joomla/extensions/components/users-component/registration-form
Тестовые логины - admin, test
Тестовый email - test@mail.ru

1 - Шаг первый, дополняем форму регистрации

Итак мы имеем стандартную форму регистрации движка версии 1.7.х. Нам потребуется файл templates/шаблон/html/com_users/registration/default.php (либо же его исходник components/com_users/views/registration/tmpl/default.php).

В самом начале находим строки

1
23
JHtml::_('behavior.keepalive');
JHtml::_('behavior.tooltip');JHtml::_('behavior.formvalidation');

и после них добавляем после закрытия php

1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
4849
5051
5253
5455
5657
5859
6061
6263
6465
6667
<script type="text/javascript">
  window.addEvent('domready', function() {    //Проверяем на лету поле с username (после ввода 3 символов)
    var username = $('jform_username'); //где jform_username это ID поля        var log = new Element('span').injectAfter(username);
        log.set('class', 'ajaxstatus');    username.addEvents({
      'keyup': function() {        if   (username.value.length > 3) { //устанавливаем с какого символа начинать проверку, в данном случае в 4
        log.highlight('#fff'); //подсветим на время обработки        log.set('html', 'проверка...');
        log.highlight('#ffe400');        var usernameA = username.get('value'); //получем новое значение поля
        var url = 'index.php?option=com_users&task=AjaxCheckUsername&format=row&username='+(usernameA);                var req = new Request({
            method: 'post',            url: url,
            onComplete: function(response) {            if (response == 1) {
              log.set('html','Логин занят');              log.set('class','checkinvalid');
            } else {              log.set('html','Логин свободен');
              log.set('class','checkvalid');            }
            }          }).send();
      } else {        log.set('html', '')
      };      }
    }); 
     //Проверяем на лету поле с email (после ввода @)
    var email = $('jform_email1'); //где jform_username это ID поля        var log2 = new Element('span').injectAfter(email);
        log2.set('class', 'ajaxstatus');    email.addEvents({
      'keyup': function() {        var emailA = email.get('value'); //получем новое значение поля
        var dogtrue = emailA.test('@');        if (dogtrue) {
          log2.highlight('#fff'); //подсветим на время обработки          log2.set('html', 'проверка...');
          log2.highlight('#ffe400');          var url = 'index.php?option=com_users&task=AjaxCheckEmail&format=row&email='+(emailA);
                  var req = new Request({              method: 'post',
              url: url,              onComplete: function(response) {
              if (response == 1) {                log2.set('html','Email занят');
                log2.set('class','checkinvalid');              } else {
                log2.set('html','Email свободен');                log2.set('class','checkvalid');
              }              }
            }).send();      } else {
        log2.set('html', '')      };
      }    });
   });</script>

2 Шаг второй - обработка

Файл components/com_users/controller.php В самом конце добавляем две новые функции

1
23
45
67
89
1011
1213
1415
1617
1819
2021
function AjaxCheckUsername()
  {    $str = JRequest::getVar('username');
    $db    = JFactory::getDBO();    $query = 'SELECT id FROM #__users WHERE LOWER( username ) = '.$db->quote($db->getEscaped($str), true);
    $db->setQuery( $query );    $result = $db->loadResult();
    $result ? $result = 1 : $result = 0;    echo $result;
    $result = '';  }
  function AjaxCheckEmail()  {
    $str = JRequest::getVar('email');    $db    = JFactory::getDBO();
    $query = 'SELECT id FROM #__users WHERE LOWER( email ) = '.$db->quote($db->getEscaped($str), true);    $db->setQuery( $query );
    $result = $db->loadResult();    $result ? $result = 1 : $result = 0;
    echo $result;  }

3 Шаг третий - облагородим внешний вид CSS

1
23
4
#member-registration span.ajaxstatus {visibility:none;}
#member-registration span.ajaxstatus, #member-registration .checkinvalid, #member-registration .checkvalid {margin: 0px 0px 0px 20px; padding: 2px;}#member-registration .checkinvalid {color: #fc0909;}
#member-registration .checkvalid {color: #3da157;}

Скриншот, как выглядит

AJAX проверка для формы регистрации для Joomla 1.7

Немного комментариев:

1 - в строках JS

1
23
var username = $('jform_username');
....var email = $('jform_email1');

Самое главное правильно определить ID поля формы с именем и адресом соответственно.

2 - Далее мы начинаем отлавливать вводимые символы, если их более 3 (либо же встретился символ @) - получаем текущее значение в поле, введенное пользователю, и отправляем на обработку в компонент в гости к добавленным двум функциям.

3 - получив ответ (я в примере, не мудрствуя лукаво, сделал ответ в виде 1 0) пишется в response и от него уже происходит обновление спана ajaxstatus на новый класс и новое содержимое. И немного добавил анимации, пока происходит обработка данных этот спан с текстом "проверка" закрашивается цветом

1
23
log.highlight('#fff');
log.set('html', 'проверка...');log.highlight('#ffe400');

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

Комментарии

0 Yazov пишет нам 30.01.2012 11:34
В 2.5 почему то не работает =( Все сделал по примеру, единственное - не менял id мыла и логина. Они вроде подходят...
Цитировать Сообщить модератору
0 Beliyadm отвечает 30.01.2012 14:12
Для 2.5 постараюсь сегодня глянуть, возможно там что изменилось
Цитировать Сообщить модератору
0 Yazov отвечает 30.01.2012 14:14
буду благодарен!
Цитировать Сообщить модератору
0 Staso пишет нам 24.03.2012 05:17
Разобрались с 2.5? Очень актуально =)
Цитировать Сообщить модератору
0 Beliyadm отвечает 24.03.2012 05:40
Да, у меня есть два варианта, как для мутулз так и для Jquery, но опять же в виде хаков, почему то лень оформлять в виде плагина. Если достаточно хаков и описаний - на днях сделаю, хотя, опять же - все по аналогии с текущими решениями, логика ни в коей мере не изменилась
Цитировать Сообщить модератору
0 Staso пишет нам 25.03.2012 04:36
Если не трудно =) относительно новичок в этой теме, поэтому описания конечно же нужны))*
Цитировать Сообщить модератору
0 Beliyadm отвечает 25.03.2012 19:38
Если не забуду - на неделе оформлю в пост
Цитировать Сообщить модератору
0 Yazov пишет нам 05.04.2012 10:51
Очень нужна такая тема для Joomla!2.5.x
Цитировать Сообщить модератору
0 X-Master пишет нам 07.04.2012 15:18
Здравствуйте! Очень интересует AJAX-проверка регистрации для Joomla 2.5, на jquery.
Цитировать Сообщить модератору
0 Artem пишет нам 20.04.2012 16:10
Как насчет хаков для Joomla 2.5.Очень нужно.
Цитировать Сообщить модератору
0 Юрий пишет нам 02.10.2012 21:09
Событие keyup как-то пугает пользователя - после каждого нажатия клавиши у него начинает мелькать надписи около поля. Если брать change форма срабатывает спокойнее - поле потеряло фокус и пошла проверка.
Цитировать Сообщить модератору
0 Beliyadm отвечает 02.10.2012 22:42
Несогласен, на keyup работают все аналогичные формы. На изменение нелогично, ведь нужно покинуть поле, а обычно как мы идем - вводим запрос сразу переходим на обработчик по enter, в таком случае ajax результаты просто не смогут показаться.
Цитировать Сообщить модератору
0 Юрий отвечает 03.10.2012 12:12
change срабатывает и при клике по enter, поле покидать не обязательно)
Цитировать Сообщить модератору
0 Beliyadm отвечает 03.10.2012 12:14
Это если на кнопку return false повесить, запретив вообще переход на результаты поиска не из выпадающего списка. Или я ошибаюсь?
Цитировать Сообщить модератору
0 Юрий пишет нам 03.10.2012 12:27
Для обычного текстового поля, после нажатия на энтер при change будет выполняться проверка. То есть пользователь спокойно ввел свой логин, нажал энтер или перешел к заполнению следующего, и поле проверяется. Так на яндексе, гугле.
Цитировать Сообщить модератору
0 Beliyadm отвечает 03.10.2012 12:30
Мне кажется, это немного не то. По ентеру не произойдет срабатывание кнопки перехода при незаполненных обязательных полях, если мы говорим про поле авторизации яндекса. Но берем поле поиска яндекса\гугля - при введении символа происходит перестройка результатов быстрого поиска, по ентеру - переход на форму результатов того, что введено в строку, не подсказки. А это все таки не change, там без потери фокуса (если только не прикручены сторонние функции) не получится. Я не говорю, что нельзя так сделать, просто это уже немного дополнительные навороты
Цитировать Сообщить модератору
0 Юрий пишет нам 03.10.2012 12:36
Я же не про поиск, я про валидацию формы) и про регистарации яши и гугли)
Цитировать Сообщить модератору
0 Beliyadm отвечает 03.10.2012 12:39
Дико извиняюсь, попутал с соседней темой по аяксовому поиску :). Тут вы, собственно, правы, по хорошему надо на change вешать
Цитировать Сообщить модератору
0 Юрий пишет нам 03.10.2012 12:54
ага, а я теперь сижу и думаю про аяксовый поиск))
Цитировать Сообщить модератору
0 Роман пишет нам 24.09.2013 14:58
Здравствуйте! Очень интересует AJAX-проверка регистрации для Joomla 2.5, на jquery.
Цитировать Сообщить модератору
0 Beliyadm отвечает 29.09.2013 05:20
Логика не изменилась, или вам нужно решение именно только под Jquery для 2.5? Переписать не очень сложно, просто в данный момент нет особо времени на бесплатные решения, спонсируете рублей 400 - сделаю для вас и выложу новую версию хака в общий доступ на радость детям
Цитировать Сообщить модератору
0 Роман пишет нам 30.09.2013 21:07
Пока не горит. Подожду желающих.
Цитировать Сообщить модератору

Оставить коммент

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