Форма не очень получилась

Вопросы и проблемы, касающиеся верстки и дизайна

Форма не очень получилась

Сообщение guyasyou » 14 мар 2014, 14:01 ,  »  Сообщение:#1

Изображение

Как можно сделать более понятнее? Чтобы из вкладки в вкладку переходили по мере наполнения.

UPD: И еще. как пофиксить карту гугл?
Логин: furion
Пароль: 111111
Форма
Пожалуйста зарегистрируйтесь, чтобы увидеть ссылку

Карта в географии объекта, криво встает. причем, если потянуть за край браузера (изменить размер окна) то чиниться.
Прошу, только не отправляйте форму...
www.pure-web.ru - fullstack разработка сайтов и веб-приложений
Аватара пользователя
guyasyou
Администратор
 
Сообщения: 559
Зарегистрирован: 05 янв 2012, 12:29
Откуда: Новосибирск

Re: Форма не очень получилась

Сообщение Count_Raven » 18 мар 2014, 15:17 ,  »  Сообщение:#2

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

Что касается перехода по мере заполнения - сделайте кнопке "Продолжить" событие onClick которое бы вызывало функцию validate.
Пусть у текущей активной вкладки будет иметься класс active-tab, соответственно, при переходе к другой вкладке вызываем removeClass у активной и addClass у той, к которой переходим.

В функции validate смотрим на текущую активную вкладку и ищем в ней элементы, необходимые для заполнения. У элементов, которые обязательны к заполнению, пусть будет класс required-field, по этому классу мы будем селектором их и находить. Собственно можно еще добавить атрибуты типа data-field-type в которые можно было бы задавать тип полей, типа number, sting, phone, email, money и на основе этого делать проверку поля, чтобы в поле телефона какашек не написали к примеру.
Ну и дальше все элементарно, проходим при помощи each по всем .required и смотрим, если пусто или еще чего не нравится - добавляем класс типа error-field (отображаем рамочку красную или там значёк с уведомлением, что поле типа обязательно нужно заполнить), можно еще к полю добавить атрибут data-warning-message, в котором хранить индивидуальное сообщение об ошибке/пояснение конкретно для данного поля ввода.

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

Вот так вот если кратко. Минут 20-30 приблизительно делать.
Можно еще взять плагины для валидации для jQuery, но мне пока ни один ни разу не понравился, как-то не очень гибко или много лишнего.
По мне удобнее написать свой универсальный скрипт валидации форм 1 раз и потом использовать его на всех проектах местами немного модифицируя.
Country Amiant - Regno All Rianto
Аватара пользователя
Count_Raven
Супермодератор
 
Сообщения: 1156
Зарегистрирован: 06 окт 2010, 15:00
Откуда: Country Amiant


Вернуться в Верстка и дизайн

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron