Check the validity of all form elements on the page

Ask the community
,
1

I have a website with a pretty long sign up form and I’m doing it through a custom Corvid form so I can have nifty features like my multiple choice question having an “Other” option with a InputText. I wanted to check the validity of all the elements of the page automatically, and it wasn’t immediately clear so I’m writing it up.

Step one is learning that we can use $w(“TextInput”) to get all elements of that type. However, that does not return the actual items (each array element is a dictionary that includes an ID). We can do $w( “TextInput” ).map(el => el.id) to get all the IDs, or to get the actual elements:

let items = $w("TextInput").map(el => $w("#" + el.id)));

This will show an error in the editor because it doesn’t think that the TextInput item has a map function. However, this will run just fine (seems to be a Wix editor bug). You can use it like an array as normal.

Similarly, if you want all types of inputs, consider something like this:

let items = [...$w("TextInput"), ...$w("CheckboxGroup"), ...$w("Dropdown"), ...$w("TextBox")].map(el => $w("#" + el.id));

Last but not least, to check the validity, here’s the next step:

let invalidCount = items.filter(el => !el.valid).length;
console.log("You have " + invalidCount + " invalid input" + (invalidCount === 1 ? "" : "s"));
1 Like
2

I’ve not come across the , structure before. Could you expand on it or perhaps link to somewhere that describes it.

3

You can search up the spread operator. It takes an array (or any iterable object) and allows the elements of the array to be used as arguments.

So if a = [1, 2, 3] and b = [4, 5, 6], then something like c = [a, b] would be an array of two elements where each are arrays themselves. Something like […a, …b] would expand into [1, 2, 3, 4, 5, 6].

4

Many thanks for that, I can see a number of places where I could use that