Check the validity of all input in one go

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');
  })
}

@ Jonathan Leung

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 :smiley:

@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!!