Как сделать индикатор заполненности полей?

Question

[myspace]

На странице есть форма с полями, хочу вывести прогресс-бар с процентом заполненности формы. Как правильно сделать его? То есть если заполнен инпут "имя" больше чем на 3 символа, то в прогресс-баре прибавилось 10%, и тд. Сделал метод, который принимает 1 аргумент с числом, которое нужно прибавить к процентам прогресс-бара. Пробую по событиям oninput, onkeypress, вызывать этот метод и передавать в него 10(чтобы увеличивалось за 10%), если длина значения инпута больше 3 символов. Но с таким подходом соответственно при каждом изменении значения прибавляется 10.

Comments

[Ivan Bogachev]

Приложите codepen/jsfiddle с вашим кодом

[Максим Тимофеев]

Ivan Bogachev: +++

Answer 1

[gleendo]

// Количество заполненных полей в форме делишь на общее количество полей и умножаешь на 100 и передаешь в метод отображения прогресс бара
// Например в форме 7 полей. Заполнил 3. Получается (3 / 7) * 100 = примерно 43%
// Передаешь в метод и отображаешь 43%
//
// Твой же способ как по мне, то неправильный. Поле же не имеет определенного размера. Человек может ввести например имя "Оля" (3 символа) и имя "Светлана" (8 символов). И считывать процент заполнения по символьно в таком случае не получится

Answer 2

[Anton Filippov]

валидировать поля
брать сумму валидированных полей по onChange = X
заполнять прогресс бар на X/N, где N - число всех полей