Progress bar in a form increase whenever a field get a valid input?

Ask the community
,
1

Hi guys
So I know we could code a progress bar for a form, and the bar will advance based on the current page.
Like in here: https://youtu.be/vOg5m1AluEg

BUT is there a way to make the progress bar increase every time a field in the form gets a valid input?

Example: I have a multi-page (or multi-page) form with 10 questions.
So, no matter which page the user is currently in, whenever he fills up a question/field and the input is valid - the progress bar will increase in 10%.
Same when the opposite occurs - if the user deletes a valid answer, the bar will decrease in 10%

Let me know if this is possible
Thanks!

2

Let’s say you have 5 different inputs, where you have to type in the correct value.

This is a very simple skeleton-code, as an example, of course you will have to modify and expand it, to make it work.

$w.onReady(()=>{
	let multiplier = 10;
	let counter = 0;
	$w('#input1, #input2, #input3, #input4, #input5').onChange(()=>{
		if ($w('#input1').valid) {counter = counter + 1;}
		if ($w('#input2').valid) {counter = counter + 1;}
		if ($w('#input3').valid) {counter = counter + 1;}
		if ($w('#input4').valid) {counter = counter + 1;}
		if ($w('#input5').valid) {counter = counter + 1;}
	});
	$w("#myProgressBar").value = counter*multiplier;
});
3

@russian-dima Thanks! ok, so the #input represents the field’s name, right?
and what if some of the fields are not a text field but dropdown, checkbox etc.?