Enable Button if enough words are inputted in Text Box

Ask the community
,
1

Hi!
What I am trying to do is Enable a submit button only when there is more than 4 words are inputted in the password text box. I have chosen " onChange" and works 99% well…the only problem is the button enable only AFTER I clicked somewhere else. Can I do I real time checking?

This is my code (work but not real time):

$w.onReady( function () {
$w(“#password”).onChange(ButtonEnableDisable);
});

function ButtonEnableDisable(){
if ($w(‘#password’).value.length >= 4) {
$w(‘#regenter’).enable()
} else {
$w(‘#regenter’).disable();
}
}

I have also tried “onKeyPress()” but not working:

$w(“#password”).onKeyPress((event) => {
let pwval = event.target.value;

if (pwval.length >= 4) {
$w(‘#regenter’).enable()
} else {
$w(‘#regenter’).disable();
}

});

–
If someone have any advice please let me know. Thank you so much!

2

Hi Kana,

It turns out that the KeyPress event object has an intuitively unexpected behavior, but there is a way to deal with it. Have a look at this annotated screen shot:

511×693 33.9 KB

Understanding this, here is some code to make your form work:

export function password_keyPress(event) {
    console.log(event);
    DisableEnable(event);
}

function DisableEnable(event){
 let realValue = "";
 switch (event.key) {
     case "Shift":
     case "Control":
     case "Alt":
     case "Meta":
       // these keys were pressed, so don't add event.key to the realValue variable. 
        realValue = event.target.value;
         break;
     case "Backspace":
         let PrevValue = event.target.value;
         let NewLength = PrevValue.length - 1;
         realValue = PrevValue.slice(0,NewLength);
         break
     default:
         realValue = event.target.value + event.key;
         break;
    }
     if (realValue.length >= 4) {
        $w('#regenter').enable()
     } else {
        $w('#regenter').disable();
     } 
}
3

The text input component needs a slight timeout to allow the value to update. See the forum post Give the TextInput onKeyPress Function some time for more information.

Once you have the correct value, you can then parse the string into an array of words. The size of the array is the number of words in the input string.

4

I know Kana used the term “words”, but how often are multiple words expected in a password input box? I’ve never seen it. The code also suggested that the intended check was for four characters entered. Kana?

5

Guys thank you very much for the info.! and yes I meant “characters”, sorry about that!

I have tried both suggestions but still I need to CLICK somewhere else to make the button enable…The following is my code using @tony-brunsman 's suggestion, in case I’ve put some codes in a wrong place.

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;

export function password_keyPress(event) {
console.log(event);
DisableEnable(event);
}

function DisableEnable(event) {
let realValue = “”;
let fadeOptions = {
“duration”: 500,
“delay”: 0
};
switch (event.key) {
case “Shift”:
case “Control”:
case “Alt”:
case “Meta”:
// these keys were pressed, so don’t add event.key to the realValue variable.
realValue = event.target.value;
break ;
case “Backspace”:
let PrevValue = event.target.value;
let NewLength = PrevValue.length - 1;
realValue = PrevValue.slice(0, NewLength);
break
default :
realValue = event.target.value + event.key;
break ;
}

if (realValue.length >= 4) {
$w(‘#regenter’).enable()
$w(“#regenter”).onClick(() => {
let email = $w(“#email”).value;
let password = $w(“#password”).value;
wixUsers.register(email, password)
.then((result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to(“/account/signup”);
})
. catch ((err) => {
console.log(err);
$w(“#error”).show(“fade”, fadeOptions);
});
});
} else {
$w(‘#pwerror’).show(“fade”, fadeOptions)
$w(‘#regenter’).disable();
}
}

$w.onReady( function () {
$w(“#password”).onChange(DisableEnable);
});

6

And for setTimeout, I have tried putting it in different place but I have no confidence at all. I have also tried to combine in the above code but no luck.

if (realValue.length >= 4) {
setTimeout(() => {
$w(‘#regenter’).enable()
}, 10);

BTW, what I am doing is something like this!

7

@kana Using Yisrael’s suggestion to put a timeout in there, you can get it to work as follows:

export function password_keyPress(event) {
       setTimeout(() => {
             let val = event.target.value;
            console.log(val);
            DisableEnable(val);
       }, 10);

}
function DisableEnable(val){
     if (val.length >= 4) {
        $w('#regenter').enable()
    } else {
        $w('#regenter').disable();
    } 
}
8

@tony-brunsman My mistake! I didn’t change back to onKeyPress before. It WORKS after I changed it!

$w(“#password”).onKeyPress(DisableEnable);

Thank you so much for you guys’ help. I really appreciate it!!!