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

Для домена 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%202018-05-19%2013.58.41.png?dl=0  

https://www.dropbox.com/s/7c6cqrotwkr7k3p/Screenshot%202018-05-19%2019.39.22.png?dl=0

но с поправкой на наш дизайн и другим набором полей.

Форма должна быть адаптивной.

Общие правила для формы

- все поля являются обязательными для заполнения / выбора

- во всех select по умолчанию выбран option value=“”>Please Choose

- все 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 предложения ориентировочно), что сейчас будет редирект редирект. В этом блоке будет одна пустая ссылка вроде 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