Главная / Архив проектов / Разработка сайтов/Верстка

Архив: 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

Категория: Разработка сайтов, Верстка

Опубликовать аналогичный проект Посмотреть похожие проекты

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

89 1

Требуется записывать видео о трейдинге. Москва.

Нужно будет делать видео по примеру уже готового видео. Вы подойдете если : имеете базовые-легкие знания в трейдинге,если у вас хороший микрофон, нормальная дикция, и есть программа для снятия экрана на видео. (Себя снимать не нужно,только видео экрана) Чем выше качество тем выше оплата . Оплата за среднее......

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

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

Похожая удалённая работа