Проверка инпута ФИО + появление новых инпутов по мере заполнения(javascript)

386

16 июля 2021, 17:50

Задача в том что по окончанию заполнения первого инпута "Фамилия", ниже появлялся второй "Имя" и затем третий "Отчество" (который к заполнению не обязателен), также снизу появляется чекбокс "проверено", если галка не стоит а поля 1 и 2 заполнены, то выдаётся ошибка.

Так инпут выглядит изначально:

Так инпут выглядит если на него нажали мышью потом фокус ушёл. Вылезли ошибки:

Так выглядит когда начинаешь вводить фамилию:

Не знаю с какой стороны подобраться)

Answer 1

Перед написанием скрипта нужно понять что именно он будет делать и как. Динамически дробить инпуты во время ввода плохая идея, т.к. очень тяжело понять КОГДА ИМЕННО посетитель начнет вводить след. блок.

Как бы я делал, исходя из своего опыта (уже скоро 15 лет), если бы клиент настаивал:
- есть поле ФИО, оно отображается по умолчанию, пока не получает фокус
- если фокус получен, то поле ФИО скрывается и появляется 3 поля: фамилия, имя, отчество + чекбокс проверка, курсор устанавливается в поле фамилия.
- во время ввода данных мы не трогаем посетителя, потому что бывают разные ситуации, например он начнет вводить в неверной раскладке...мы же не будем ему сразу показывать ошибку =)
- после нажатия чекбокса скрипт проверяет каждое из полей (только буквы, минимум 1-2 - по желанию), если все верно, то суммирует введенное в каждом из 3 полей, отправляет в поле ФИО, отображает его, скрывает поля фамилия, имя, отчество, чекбокс.

В итоге у нас красивая удобная форма, которая и занимает мало места и приятна для посетителя, более того никто не запрещает собирать инфу именно из полей имя/фамилия отдельно, если это нужно по какой-то причине.