Как реализовать данную форму?

Question

[faleaksey]

Всем привет! имеется форма:

принцип работы следующий:

поле с email и кнопка не активны пока не проверится ключ(первое поле).
Ключ проверяется после того как мы его ctr + c/ctr + v в поле или же когда ввели последний символ(спустя 500мс).
Ключ проверяется отправкой через ajax на сервер и возвращает ответ - если ответ ок, то поле с email и кнопкой становятся активны и далее вводим email и отправляем это ещё раз чтобы получить на мыло "плюшку".
Как подойти к реализации? я приблизительно представляю как это сделать через несколько функций ajax но не хочется копипастить и плодить код.

Comments

[Антон Федорян]

тебе не хочется, мне не хочется... кто же в итоге это будет делать?

[Дмитрий]

я приблизительно представляю как это сделать через несколько функций ajax

Ну так покажите результат своих изысканий. Чего стесняться-то?

Answer 1

[Илья]

Если кратко и не писать код:
1) Вешаешь на input с ключом событие input, которое запускает функцию валидации. В функции получаешь значение поля, ставишь некоторую задержку, повторно проверяешь значение (это для того, чтобы понять закончил ли пользователь ввод, ибо при событии change функция сработает только после сброса фокуса с поля), проводишь валидацию отправкой запроса на сервер. Верно - активируешь поле e-mail.
2) По input или change валидируешь e-mail на клиенте по маске и активируешь кнопку.
3) По нажатию на кнопку отправляешь снова AJAX.

Другой вариант с одним AJAX запросом - всего лишь превалидировать ключ на клиенте по маске, а конкретно проверять его уже на сервере после отправки всей формы и возвращать корректность значения.

Comments

[faleaksey]

Илья , спасибо за ответ! Сделаю пока так, а там посмотрим!

[Илья]

faleaksey, всегда пожалуйста!