I have created a form with text inputs, dropdowns and checkboxes. Some of them are required and some aren’t. Since there are too many input fields, I want to select all input in one go, check if all of the inputs are valid. Is there any functions that I can use? I tried grouping the elements together and used forEachItem, and apparently it doesn’t work.
If you want to check the validity such as
-
whether the input field is in the desired format or not
-
whether the input field has been filled or not
You can use the TextInput element’s validity function . Something like the below.
if ($w("#tC").checked === false) { //seeing if a checkbox is checked or not
$w("#tcError").show();
} else if ($w("#applicantSurName").valid === false) { //input field check
$w("#invalid").show()
} else { //when true you can proceed with submission
$w("#sending").show();
wixData.insert("Applicants", item)
.then(() => {
wixLocation.to('/success');
})
}
the way you validate multiple parameters all in one go is with &&
something like this…
$w.onReady( function () {
if (
($w(‘#passwordInput’).value.length >= 8) &&
($w(‘#passwordInput’).value === $w(‘#confirmPasswordInput’).value) &&
($w(‘#input1’).value !== “”) &&
($w(‘#input2’).value !== “”) &&
($w(‘#dropdown1’).value !== “”) &&
($w(‘#signupTermsCheckbox’).checked))
{
console.log("successful validation");
//execute your next function here, like register user or whatever
} **else**
console.log("failed validation");
})
i am aware of the method and property of valid and validity etc., but i have like 30+ input fields so i dont want to input them one by one like ($w(’ #passwordInput ‘).value.length >= 8) && ($w(’ #passwordInput ‘).value === $w(’ #confirmPasswordInput ‘).value) && ($w(’ #input1 ‘).value !== “”) && ($w(’ #input2 ‘).value !== “”) && ($w(’ #dropdown1 ‘).value !== “”) && ($w(’ #signupTermsCheckbox ').checked)). so there is no for-each-loop function in wix so i can check their validity in one go?
You can retrieve an array of components using something like this:
let textElements = $w(“TextInput”);
You can then loop through all of the text elements on the page. Similarly, if you have a bunch of Checkboxes or Dropdowns you can get the arrays of those elements as well.
See the $w API more information.
e.g, for this array $w(“TextInput”), for unknown reason i cant use $w(“TextInput”).length
i know the usage of validity function, but i dont want to type the code one by one. i want to for-loop all of the validity of input in one go, is that possible in wix?
if $w(“TextInput”).length works i can do something like this:
var valid = true
for ( var i = 0; i < $w(“TextInput”).length; i++) {
if ($w(“TextInput”)[i].valid === false ){
valid = false ;
break
}
}
I have the same question, is there anything to group elem and just apply .valid on them (sorry I’m a python lover) ?
I love to see previous answers, the question was clear
@leungsikchi did you manage to get a working solution to this? I’m trying to achieve the same as I have lots of inputs to validate…
I wanted to pipe in because I found a working solution. As was said before, we can use $w(“TextInput”) to get all elements of that type. However, that does not return the actual items (although it does give us an ID). As a result, we can do $w( “TextInput” ).map(el => el.id)) to use the IDs to get an array of 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. You can loop through it 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));
For those of you who want 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"));
Nice. How about posting this in the Tips, Techniques, Example . category.
Thank you! Didn’t know about that category, but I’ve posted there now: https://www.wix.com/corvid/forum/tips-tutorials-examples/check-the-validity-of-all-form-elements-on-the-page
Boom shakalaka!!