Сделать веб-страницу с формой заявки
Сделать веб-страницу с формой ввода заявки:
- ФИО (русские буквы, пробелы, дефис)
- телефон (с форматированием под стандарт +79871234567)
- адрес (с вводом по dadata.ru - подсказки)
- комментарии к адресу (простой текст)
- дата встречи (календарик с текущей датой "сегодня")
- продукт (выбор из списка, список статический)
Все поля кроме "комментарий" обязательны к заполнению.
Кнопки "Отправить" и "Очистить" (эта кнопка должна быть с защитой: либо спрашивает "Вы уверены", либо кнопка, которую нужно нажать и сдвинуть вбок чтобы она сработала)
Так же на странице в правом верхнем углу отображаются значение параметров opID и opName, которые переданы в URL-е (например, https://lala.ru/myform.html?opID=234&opName=Vasya)
Логика работы:
1) Пользователь заполняет форму, нажимает "Отправить". Вылазит подтверждение "Точно отправить"? Если да, то форма отправляется на указанный мной URL (расположенный на другом поддомене одного и того же домена) методом POST. В тело запроса включается вся собранная информация, плюс opID и opName, плюс структура данных, полученная от ДаДата.Ру при проверке адреса.
2) Если сервер принял информацию (код 200 + оговоренная с Вами структура json), он вернет "идентификатор заявки" (строка, содержащая кириллицу).
3) Данный "идентификатор заявки", а так же opID, opName и отметку времени нужно отправить POST'ом на другой URL (в ответ получить 200 ОК)
4) Пользователю показать, что данные успешно отправлены, кнопка ОК. По нажатию на ОК - переходим на пункт п. 1 - новый ввод данных.
Длительную отправку данных - визуализировать индикатором ожидания. Ошибку отправки - визуализировать, при этом данные формы не должны быть потеряны, и нужно предлагать отправить заново (бывает, сервер кратковременно не принимал запросы).
Очень хочется решение на современном VueJS. Если я правильно понимаю, на обычном хостинге reg.ru это заведется, поскольку технология формы - клиентский html + js + css.
Почему VueJS - потому что хочется посмотреть как это выглядит и работает, + для Dadata есть готовый компонент, + потом форма скорее всего будет усложняться потребуется реактивность.