проверка формы регистрации с помощью JavaScript + ajax

storng

Новичок
проверка формы регистрации с помощью JavaScript + ajax

Добрый день, понимаю, что это форум по php, однако, уверен, что и тут есть специалисты, которые могут помощь мне в решении одной запутанной задачи. Если вас не затруднит, прочитайте , пожалуйста, ниже.

Есть форма регистрации.
Человек вводит логин, и до того, как пустить его на скрипт регистрации (передать туда данные с формы) я хочу интерактивно проверить, есть такой логин в базе или нет.

Что я делал,

Вешал обработчик на форму onSubmit="return entersubmit();"

В функции обработчика мне с помощью ajax нужно проверить, есть ли такой логин или нет. И далее условие, если логин есть – то выдать сообщение, и не пустить дальше выполнение формы, т.е. вернуть return false, если логина нет, то пустить скрипт дальше выполняться.
Всё звучит хорошо, но я не успеваю это делать, если я в конце этой функции пишу return false, то даже если с помощью аякса я проверю и верну return true, переход к серверному скрипту с формы не происходит.

Вот подобие функции, которая вызывается при событии onSubmit



enterofff=0; // Глобальная переменная (знаю что ужасно, но ничего не могу придумать лучше)
function entersubmit()
{
loginformz=$('#loginenterform').val();

formenterdata='loginenterform='+loginformz;
$.post("checkenter.php", formenterdata,formenter);

if (enterofff==1)
{
return true;
}

return false;
}

Вот функция которая вызывается после отработки AJAX –пост запроса к серверу

function formenter(data,status)
{
if (data=='ok')
{
enterofff=1;
}
}

В таком случае, один раз кликаем по кнопке формы – форма не передаётся дальше серверному скрипту, но меняется значение глобальной переменной enterofff =1
При повторном клике уже происходит переход.
Но это абсолютно кривое решение, и оно меня не устраивает.
Пытался повесить проверку логина при смене фокуса, но тоже наверное криво это всё.

Подскажите, пожалуйста, как лучше с помощью аякса проверить есть ли логин в БД, если есть, то не пускать переход с формы на серверный скрипт, если нет логина – то пустить.
Почему средствами AJAX? Форма регистрации находится за несколькими JS-экранами, нельзя обновлять страницу.

Спасибо!
 

dimagolov

Новичок
то даже если с помощью аякса я проверю и верну return true, переход к серверному скрипту с формы не происходит.
конечно, потому что submit формы давно отменен. его нужно запускать по-новому, типа "formObj.submit();"
 

A1x

Новичок
В функции обработчика мне с помощью ajax нужно проверить, есть ли такой логин или нет.
ставят такую проверку в обработчик onblur поля логина -
так проверка происходит пока человек заполняет другие поля
 

storng

Новичок
Автор оригинала: dimagolov
конечно, потому что submit формы давно отменен. его нужно запускать по-новому, типа "formObj.submit();"
Спасибо, кажется то, что нужно!

-~{}~ 10.04.10 00:22:

Автор оригинала: A1x
ставят такую проверку в обработчик onblur поля логина -
так проверка происходит пока человек заполняет другие поля
Да, я это понимаю, что так принято, и реализовано на многих сайтах, однако мне не нравится то, что человек может в последний момент изменить логин, и тут же кликнуть на кнопку-сабмит, ajax-запрос не успеет отработать.
 

dimagolov

Новичок
storng, а ведь A1x правильно сказал, проверять нужно после onblur, а в onsubmit проверять флаг проверки.

п.с. но на стороне сервера все равно проверять нужно будет еще раз, мало ли что от клиента пришло.
 

storng

Новичок
Автор оригинала: dimagolov
storng, а ведь A1x правильно сказал, проверять нужно после onblur, а в onsubmit проверять флаг проверки.

п.с. но на стороне сервера все равно проверять нужно будет еще раз, мало ли что от клиента пришло.
Разумеется, что на стороне сервера нужно проверку делать ещё раз, т.к. клиентские проверки - для удобства пользователей.
А по поводу onblur уже делал, но решение с проверкой по submit мне кажется будет универсальные и надёжнее.
Попробую реализовать, отпишусь что получится)

-~{}~ 10.04.10 10:20:

Реализовал таким способом, привязал обработчик onClick к кнопке submit формы

<input type="submit" onClick="return entersubmit();" />


Сам код обработчика:


enterofff=0;

function entersubmit()
{

if (enterofff==1)
{
return true;
}

loginformz=$('#loginenterform').val();

formenterdata='loginenterform='+loginformz;
$.post("checkenter.php", formenterdata,formenter);


return false;
}

Урезанный код функции обратного вызова formenter() ajax-post запроса к серверному скрипту проверки логина checkenter.php



function formenter(data,status)
{
if (data=='ok')
{
enterofff=1;
$('#form_signin').submit();
}
}


Теперь при клике по кнопке отправки формы, мы в обработчике события клика проверяем глобальную переменную enterofff изначально установленную в 0
Если она равна 1, то спокойно выполняем стандартный набор сабмита формы (уходим на серверный скрипт), если 0 - то делаем аякс запрос к серверу, получаем необходимую информацию, анализируем её в функции обратного вызова, если всё ок, то устанавливаем глобальную переменную в 1, и вызываем событие сабмита формы.
При следующем проходе условие if (enterofff==1) сработает и форма отработает по умолчанию.

Мне кажется этот алгоритм хоть и некрасив, однако более универсален в части многочисленных проверок формы, т.е. позволит спокойно сделать все проверки и направить человека в нужное место.


Как вам такая реализация?
 

pilot911

Новичок
используй плагин validate в jQuery

там все это есть и делается без напряга

вот пример с ajax http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html
 

storng

Новичок
Автор оригинала: pilot911
используй плагин validate в jQuery

там все это есть и делается без напряга

вот пример с ajax http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html
Окей, спасибо, обязательно посмотрю

Но всё-таки, хотелось бы знать, на каких принципах работает то, что использую, не люблю работать с чёрными ящиками :)
 

A1x

Новичок
человек может в последний момент изменить логин, и тут же кликнуть на кнопку-сабмит, ajax-запрос не успеет отработать.
перед отправкой аякс-запроса по onblur выставляем какой-нибудь флаг:
waitForLoginCheck = true;
сбрасываем этот флаг когда получен ответ на запрос

если в момент нажатия кнопки сабмит этот флаг выставлен- обработчик onsubmit возвращает false и (если остальные поля заполнены без ошибок) выставляет флаг
doSubmitOnAjaxCheck = true
если выставлен этот флаг - вызываем myForm.submit() из обработчика ajax onSuccess (если логин допустимый)

Как вам такая реализация?
с точки зрения юзабилити лучше когда к моменту нажатия кнопки сабмит логин может уже быть проверен
 

storng

Новичок
A1x, Интересная реализация.

Но вот в части юзабилити если посмотреть...
Пользователь ввёл все поля, далее изменил символ в логине и тут же кликнул кнопку Submit- ничего не произойдёт, т.к. на получение информации от серверного скрипта нужно время.

А если проверять все поля по сабмиту, то можно вывести красивое сообщение, что происходит проверка формы, и если всё ок, без лишних телодвижений пользователя вызывать submit
 

A1x

Новичок
далее изменил символ в логине и тут же кликнул кнопку Submit- ничего не произойдёт,
произойдет - onblur и т.д. - форма отправится или выведется сообщение что логин занят через 1-2 сек. когда будет получен результат запроса
 

Crys

Двинутый новичок
А если проверять все поля по сабмиту
а кто запрещает совместить проверку по сабмиту и по onblur?

да и вообще, при желании можно и писю об стул сломать... если человек специально меняет логин и сразу клацает на сабмит - кто запрещает ему вообще отключить js? всем же не угодишь...
 
Сверху