Архив: HTML форма c валидацией на Bootstrap + jQuery

Бюджет По договоренности
Создан: 6 лет назад
Закрыт
Описание
Для домена immediatepaydayloan[точка]com нужно собрать форму на Bootstrap v3.1.1 + jQuery v1.12.4 + дополнительные библиотеки которые могут понадобится для валидации и форматирования.

Дизайн шапки и футера нужно взять с любой внутренней (например /how-it-works.php)
В шапке оставить только лого а в меню только один пункт  apply for a loan.
В Футере только часть с копирайтами.

Сама форма должна выглядеть аля
https://www.dropbox.com/s/u5dpqhgyyxhj4kc/Screenshot 2018-05-19 13.58.41.png?dl=0
https://www.dropbox.com/s/7c6cqrotwkr7k3p/Screenshot 2018-05-19 19.39.22.png?dl=0
но с поправкой на наш дизайн и другим набором полей.
Форма должна быть адаптивной.

Общие правила для формы
- все поля являются обязательными для заполнения / выбора
- во всех select по умолчанию выбран option value=“”>Please Choose</option
- все radio по умолчанию не имеют атрибута checked
- использовать плэйсхолдеры аналогичные лэйблам если для поля не прописан формат
- если прописан формат и/или правила валидации нужно запретить ввод неподходящих символов
- 2 варианта ошибок может появляться возле поля: если поле не заполено или не выбрано - The field is required; если формат неподходящий и/или не прошло валидацию - Invalid Value;
- для блоков текста используйте Lorem ipsum

Вся форма делится визуально на 5 блоков (отмечены жирным ниже)
Для каждого блока приведен список полей с указанием типа и особенностей

Requested Loan Amount
Loan Amount
select + ползунок (при перетаскивании меняется сумма в селекте а при выборе через селект показываем соответсвующее значение на ползунке) - список с опциями от 100 до 1500 с шагом 100

Personal Information
First Name  - input с валидацией по регулярке [a-zA-Z ]
Last Name - input с валидацией по регулярке [a-zA-Z ]
Date of Birth - input с маской MM/DD/YYYY и валидацией по формату маски + валидная дата
Primary Phone - input c маской (xxx) xxx-xxxx и валидацией по формату маски (только цифры)
Best Contact Time - select с опциями Anytime Morning Afternoon Evening
Email - input с валидацией на формат валидного адреса
Social Security Number - input с маской xxxx-xx-xxx  и валидацией по формату маски (только цифры)
Driver License Number - input с валидацией по регулярке [0-9a-zA-Z]
Driver License Issuing State - select c опциями (смотрите список штатов в php файле)

Address Information
Zip - input xxxxx с валидацией по регулярке [0-9]{5}
State  - select c опциями (смотрите список штатов в php файле)
City - input
Address - input
Do you own or rent? - select или radio c 2мя опциями Own и Rent
Time at this address - select с опциями от 1 до 10 - рядом пометка Years

Employment Information
Income Source - select  или radio c 2мя опциями Job Income или Benefits
Time Employed -  select с опциями Unemployed 1 Month 3 Months 6 Months 9 Months 1 Year 2 Years 3 Years 5 Years
Active Military? - select или radio c 2мя опциями Yes и No
Employer Name  - input
Job Title - input
Employer Phone - input c маской (xxx) xxx-xxxx и валидацией по формату маски (только цифры)
Monthly Net Income - select с опциями 1500 2000 2500 3000 3500 4000 4500 5000 5500
Pay Frequency - select c опциями Weekly, Biweekly, Twice a Month, Monthly
Next Pay Date - input с маской MM/DD/YYYY  и валидацией по формату маски (валидная дата)
Second Pay Date - input с маской MM/DD/YYYY  и валидацией по формату маски (валидная дата)

Banking Information
Bank ABA/Routing Number - input с валидацией по регулярке [0-9]{9}
Bank Account Number - input с валидацией по регулярке [0-9]{4,30}
Bank Account Type - select или radio c 2мя опциями Checking и Saving
Bank Name - input
Bank Phone - input c маской (xxx) xxx-xxxx и валидацией по формату маски (только цифры)
Months At Bank - select c опциями 1 Month 3 Months 6 Months 9 Months 1 Year 2 Years 2+ Years
Direct Deposit? - select или radio c 2мя опциями Yes и No


Далее идет блок текста с 2 предложениями.

checkbox - I agree to the Terms & Use.

Submit - кнопка


По нажатию на ссылку Terms & Use ниже разворачивается div ограниченный по высоте ориентировочно на 6 строк. Изначально там прописано только Loading, please wait. После разворота по урлу terms.php подгружается html и вставляется в только что раскрытый блок, при необходимости появлятся появляется вертикальный скрол.

По нажатию на кнопку submit отправляется ajax ( type: "post", datatype: 'json') запрос по урлу ajax.php

На время загрузки кнопка становится неактивной и текст ее меняется на (спинер) Loading …

on.fail - показываем “красный” блок текста (2 предложения ориентировочно) над кнопкой, возвращаем кнопку к исходному состоянию


on.success вариантов ответа может быть четыре:

{"status":"success","url":"https:\/\/example.com\/url”} - в этом случае показываем над кнопкой “зеленый” блок текста (2 предложения ориентировочно), что сейчас будет редирект редирект. В этом блоке будет одна пустая ссылка вроде <a href=“”>click here</> . в атрибут href этой ссылки нужно вставить значение url из ответа

{"status":"error","errors":{"birthdate":"birthdate”,”active_military”:”active_military"}} - в этом случае показываем “красный” блок текста  (2 предложения ориентировочно) и подсвечиваем ошибкой (Invalid Value) все поля имена которых упоминаются в массиве errors , возвращаем кнопку к исходному состоянию

{"status”:”reject”} - в этом случае показываем “желтый” блок текста  (2 предложения ориентировочно), возвращаем кнопку к исходному состоянию

{"status”:”server”} или нет значения status в json или невалидный json - в этом случае показываем тот же блок что и для on.fail
Категория

Похожие проекты

safe 
0 0
Ищу клиента для создания учебного проекта и оформления портфолио бесплатно или за символическую сумму....
 
89 1
Нужно будет делать видео по примеру уже готового видео. Вы подойдете если : имеете базовые-легкие знания в трейдинге,если у вас хороший микрофон, нормальная дикция, и есть программа для снятия экрана на видео. (Себя снимать не нужно,только видео экрана) Чем выше качество тем выше оплата . Оплата за среднее......
$1000
286 5
TALP GROUP Мы занимаемся разработкой и продвижением IT- продуктов. В нашем арсенале множество интересных кейсов, большинство из которых реализованы на нашей собственной low/no code платформе Аltrp. Мы работаем как над внутренними проектами, так и с внешними заказчиками. Среди них: разработка швейцарской......
safe 
662 24
Должно быть у исполнителя готовое и грамотно сделанное портфолио....
$13
187 4
Сайт на Laravel нужно переделать авторизацию логин-пароль на двухфакторную по емейл, логин-пароль-код....
 
179 4
Верстка на React с использованием своего UI kit. Использование препроцессора для стилей SCSS. Методология БЭМ. Чистая и аккуратная верстка. Понимание концепции React....
$1875
312 0
Команда специалистов в области электронной коммерции в поисках еще одного фронт разработчика. Более 5ти лет мы работаем с западными клиентами в области электронной коммерции, создаем крутые сайты, которые помогают нашим клиентам увеличивать их доход и положение на рынке, решаем интересные и сложные задачи.......
 
438 17
Необходима html+css верстка для нескольких проектов в области коммерции, а так же криптовалютной тематики. Референсы сайтов, которые максимально схожи с задачами, которые нужно будет выполнять:. https://hyiplab. afreeca. ru/. http://xn--d1aucemf. xn--p1ai/. nominex. io/ru. Требования к вёрстке: pixel......
safe 
230 11
Сайт для рандомальнго выбора рецепта нужно сверстать сайт для задания по учебе . php html css Javascript mysql более подробную информацию о том как должен выглядеть сайт  я изложу позже. Есть наброски....
safe$275
171 5
Задача внести изменения на сайт:. - внесение правок для UI/UX вёрстки + замена нескольких изображений. Макет в Фигме, картинки уже готовы. - SEO-оптимизация по отчёту SemRush. - интеграция сервиса автоматического перевода - Phrase. - интеграция чата JavaScript SDK от пользователя - Crisp. Подробное ТЗ......
10 месяцев назад
 
121 1
http://night. fixmoke. ru/goods? brands=41. https://prnt. sc/17vbu7r. 1) Нужно сделать, чтобы при выборе значений, эти значения выбирались во всех селектах. Если выбрал в списке, то выбирается и в сайдбаре и наоборот. И также, если добавил в корзину то отображалось во всех местах. 2) Также нужно сделать,......
safe$19
103 5
 
245 7
Нужен опытный специалист с хорошим знанием CSS, Responsive Design, Mobile First и дизайнерскими навыками. Мы хотим постепенно заменять страницы сайта «Мир отходов» https://waste. ua, действующая версия которого работает с 2006 г. , устарела и не отвечает современным требованиям. На данном этапе нужно......
safe 
554 22
Требуется специалист для работы над вёрсткой нового дизайна сайта.   Проект текущий, к вёрстке новых страниц приступаем, как только дизайнер сдаёт макеты. Всё сдаётся в срок.   Макеты для оценки стоимости работ предоставим при обсуждении проекта.   Если заинтересовались, пожалуйста, пришлите портфолио.......
$313
413 10
Обязанности:. - Разработка сайтов по макету,. - Работа с CMS;. - Размещение информации на сайтах заказчика,. - Учиться и узнавать что-то новое. Требования к кандидату. Желание работать долгосрочно, на постоянной основе. Желание и умение учиться самостоятельно. Желателен опыт работы с Photoshop, знание......
safe$150
201 10
На сайте версия Bootstrap v3. 7, в ней и надо верстать, чтобы не было проблем при интеграции. Нужна вёрстка высокого уровня: чистая, красивая. Вёрстку натягивать не надо она будет натянута на cms 1С Битрикс штатным разработчиком. От исполнителя требуется только вёрстка. При вёрстке стараться не добавлять......
 
154 4
Я с напарником создаю агентство цифрового маркетинга. Я буду заниматься настройкой рекламы, партнер будет заниматься переговорами + он может принимать деньги (есть расчетный счет) + у него есть портфолио. Нужны еще партнеры. В частности, фронтендер. Т. делать лендинги клиентам и т. Есть конкурентные......
$5
230 3
Ищем Веб-мастера для постоянного сотрудничества. Возможность работать в течение первой или второй половины дня с 9 до 18. Необходимо знать bootstrap html css, js , основные движки joomla wordpress. Для потенциальных сотрудников мы предоставляем ОПЛАЧИВАЕМОЕ тестовое задание. Необходимо будет сверстать......
 
244 16
Внешний вид как у приложения со статьями. Запускаться оффлайн через html. index файл. Меню сверху, которое прокручивается вместе с сайтом, чтобы было постоянно на виду. В меню несколько разделов: Главная, анонсы, тиражи, полезное. В каждом от 1 до 3 статей. Заказ подобного сайта будет каждую неделю.......
safe$15
579 40
Добрый день. Нужно сверсать веб резюме. Материал по ссылке. Для нормального отображения нужно скачать https://drive. google. com/file/d/1Rmit1zqQwjPIOunTbgPsTIokmyG3LcFV/view?...