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.")
1 - Шаг первый, дополняем форму регистрации

Итак мы имеем стандартную форму регистрации движка версии 1.7.х. Нам потребуется файл templatesшаблонhtmlcom_usersregistrationdefault.php (либо же его исходник componentscom_usersviewsregistrationtmpldefault.php).

В самом начале находим строки
1.
JHtml::_('behavior.keepalive');
2.
JHtml::_('behavior.tooltip');
3.
JHtml::_('behavior.formvalidation');

и после них добавляем
01.
window.addEvent('domready', function() {
02.
//Проверяем на лету поле с username (после ввода 3 символов)
03.
var username = $('jform_username'); //где jform_username это ID поля
04.
var log = new Element('span').injectAfter(username);
05.
log.set('class', 'ajaxstatus');
06.
username.addEvents({
07.
'keyup': function() {
08.
if (username.value.length > 3) { //устанавливаем с какого символа начинать проверку, в данном случае в 4
09.
log.highlight('#fff'); //подсветим на время обработки
10.
log.set('html', 'проверка...');
11.
log.highlight('#ffe400');
12.
var usernameA = username.get('value'); //получем новое значение поля
13.
var url = 'index.php?option=com_users&task=AjaxCheckUsername&format=row&username='+(usernameA);
14.
var req = new Request({
15.
method: 'post',
16.
url: url,
17.
onComplete: function(response) {
18.
if (response == 1) {
19.
log.set('html','Логин занят');
20.
log.set('class','checkinvalid');
21.
} else {
22.
log.set('html','Логин свободен');
23.
log.set('class','checkvalid');
24.
}
25.
}
26.
}).send();
27.
} else {
28.
log.set('html', '')
29.
};
30.
}
31.
});
32.

33.

34.
//Проверяем на лету поле с email (после ввода @)
35.
var email = $('jform_email1'); //где jform_username это ID поля
36.
var log2 = new Element('span').injectAfter(email);
37.
log2.set('class', 'ajaxstatus');
38.
email.addEvents({
39.
'keyup': function() {
40.
var emailA = email.get('value'); //получем новое значение поля
41.
var dogtrue = emailA.test('@');
42.
if (dogtrue) {
43.
log2.highlight('#fff'); //подсветим на время обработки
44.
log2.set('html', 'проверка...');
45.
log2.highlight('#ffe400');
46.
var url = 'index.php?option=com_users&task=AjaxCheckEmail&format=row&email='+(emailA);
47.
var req = new Request({
48.
method: 'post',
49.
url: url,
50.
onComplete: function(response) {
51.
if (response == 1) {
52.
log2.set('html','Email занят');
53.
log2.set('class','checkinvalid');
54.
} else {
55.
log2.set('html','Email свободен');
56.
log2.set('class','checkvalid');
57.
}
58.
}
59.
}).send();
60.
} else {
61.
log2.set('html', '')
62.
};
63.
}
64.
});
65.

66.
});
2 Шаг второй - обработка

Файл componentscom_userscontroller.php В самом конце добавляем две новые функции
01.
function AjaxCheckUsername()
02.
{
03.
$str = JRequest::getVar('username');
04.
$db =& JFactory::getDBO();
05.
$query = 'SELECT id FROM #__users WHERE LOWER( username ) = '.$db->quote($db->getEscaped($str), true);
06.
$db->setQuery( $query );
07.
$result = $db->loadResult();
08.
$result ? $result = 1 : $result = 0;
09.
echo $result;
10.
$result = '';
11.
}
12.
function AjaxCheckEmail()
13.
{
14.
$str = JRequest::getVar('email');
15.
$db =& JFactory::getDBO();
16.
$query = 'SELECT id FROM #__users WHERE LOWER( email ) = '.$db->quote($db->getEscaped($str), true);
17.
$db->setQuery( $query );
18.
$result = $db->loadResult();
19.
$result ? $result = 1 : $result = 0;
20.
echo $result;
21.
}
3 Шаг третий - облагородим внешний вид CSS
1.
#member-registration span.ajaxstatus {visibility:none;}
2.
#member-registration span.ajaxstatus, #member-registration .checkinvalid, #member-registration .checkvalid {margin: 0px 0px 0px 20px; padding: 2px;}
3.
#member-registration .checkinvalid {color: #fc0909;}
4.
#member-registration .checkvalid {color: #3da157;}
Скриншот, как выглядит
Немного комментариев:

1 - в строках JS
1.
var username = $('jform_username');
2.
....
3.
var email = $('jform_email1');
Самое главное правильно определить ID поля формы с именем и адресом соответственно.

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

3 - получив ответ (я в примере, не мудрствуя лукаво, сделал ответ в виде 1 0) пишется в response и от него уже происходит обновление спана ajaxstatus на новый класс и новое содержимое. И немного добавил анимации, пока происходит обработка данных этот спан с текстом "проверка" закрашивается цветом
1.
log.highlight('#fff');
2.
log.set('html', 'проверка...');
3.
log.highlight('#ffe400');

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