|SOLVED| If user input is filled another input is required

Ask the community
, ,
1

I have a form with user inputs for property owners.

1169×575 35.4 KB

The first one is required. If the “First Name 2” is filled, it makes “Last Name 2, Email 2, and Phone 2” Required.

Any help is appreciated.

Unfortunately, user inputs don’t have the ability to assign rules like wix forms does.

2

You can do something like:

$w.onReady(() => {
$w('#firstName2').onInput(event => {
$w('#lastName2').required = !!$w('#firstName2').value;//if there's a value that is defined and is not an empty string, it'll set the other field to be required.
})
})
3

And if you wish to treat white-spaces value as an empty string, you can do:

$w.onReady(() => {
    $w('#firstName2').onInput(event => {
        $w('#lastName2').required = !!$w('#firstName2').value.trim();
    })
})
4

Thanks. Ill try this out and let you know how it goes.

5

Worked PERFECTLY!!! Thank you so much.

Here is the complete code. Hopefully it helps others. All I had to do was duplicate what you advised to execute how I needed.

$w . onReady (() => {
$w ( ‘#input203’ ). onInput ( event => {
$w ( ‘#input202’ ). required = !! $w ( ‘#input203’ ). value . trim ();
$w ( ‘#input201’ ). required = !! $w ( ‘#input203’ ). value . trim ();
$w ( ‘#input200’ ). required = !! $w ( ‘#input203’ ). value . trim ();
})
})

$w . onReady (() => {
$w ( ‘#input207’ ). onInput ( event => {
$w ( ‘#input206’ ). required = !! $w ( ‘#input207’ ). value . trim ();
$w ( ‘#input205’ ). required = !! $w ( ‘#input207’ ). value . trim ();
$w ( ‘#input204’ ). required = !! $w ( ‘#input207’ ). value . trim ();
})
})

$w . onReady (() => {
$w ( ‘#input211’ ). onInput ( event => {
$w ( ‘#input210’ ). required = !! $w ( ‘#input211’ ). value . trim ();
$w ( ‘#input209’ ). required = !! $w ( ‘#input211’ ). value . trim ();
$w ( ‘#input208’ ). required = !! $w ( ‘#input211’ ). value . trim ();
})
})

6

You’re welcome.
You can do it shorter:

$w.onReady(() => {
    $w('#input203, #input207, #input211').onInput(event => {
        $w('#input202, #input201, #input200').required = !!$w('#input203').value.trim();
        $w('#input206, #input205,#input204').required = !!$w('#input207').value.trim();
        $w('#input210, #input209, #input208').required = !!$w('#input211').value.trim();
    })
 })
7

Awesome. Thanks. That will probably speed up page load.

8

Sorry to bug. Is there a way to set the input as required if the value of another input is greater than “0”?

I tried looking up some stuff and tried some code myself before bugging you. Unfortunately no result. lol.

I have an input that asks “garage spaces” and another that asks “garage description”

If “garage spaces” is greater than “0” then “garage description” should be required.

9

@miguelbuyme

$w.onReady(() => {
$w('#garageSpaces').onInput(event => {
$w('#garageDescription').required = Number($w('#garageSpaces').value) > 0;
})
})
10

@jonatandor35

You really are a master! Worked like a charm.

Question? Do you work or have a business in coding or site management? I would like to send you some business. Also, once I’m up and running and making some revenue I would have you help manage my site. Of course not free. lol.

I truly appreciate all you assistance.

11

@miguelbuyme
Thank you very much.
But I’m currently too overloaded with the projects I already have, so I can’t take more projects for now.