I need some help with a piece of code for my register form. I am trying to include a password match validation. If the passwords do not match, i want it to show text “Passwords Do Not Match” in the #text43 box the error message. I don’t think i am writing the code correctly.
import wixUsers from ‘wix-users’;
import wixLocation from “wix-location”;
import wixWindow from ‘wix-window’;
$w.onReady(function (){
$w(’ #submit ‘).onClick(() => {
wixUsers.register($w(’ #email ‘).value, $w(’ #password ‘).value, {
“contactInfo”: {
“firstName”: $w(’ #firstName ‘).value,
“lastName”: $w(’ #lastName ‘).value,
“phoneNumber”: $w(’ #phoneNumber ‘).value,
“street”: $w(’ #street ‘).value,
“city”: $w(’ #city ‘).value,
“state”: $w(’ #state ‘).value,
“zipcode”: $w(’ #zipcode ‘).value,
“password”: $w(’#password’).value,
}
}).then(() => {
//Everything went good, user was registered, now going to redirect
console.log(‘user registered successfully’);
wixLocation.to(‘/plans-pricing’);
}).catch((err) => {
//If there is an error it will not redirect, it will console.log the error
console.log(${err}: Error)
});
let password1 = $w(“#password”).value;
let password2 = $w(" #pass2 ").value;
if (password1 === password2) {
console.log(“They match!”);
} else {
console.log(“The passwords don’t match”);
console.log($w(‘#text43’).text);
}
});
});
If you wish to add a pup up message, I suggest you to add a text element and choose “Hidden on load”
in the element’s properties.
Add the condition before the register() event and if correct, active the function, else clean the passwords elements.
*Pay attention, there is no need to write the passwords twice (at the contact info and as a parameter in the function)
*In addition, instead of writing the code in the onReady() function, add an onClick() event handler.
Follow the code below:
import wixUsers from 'wix-users';
import wixLocation from "wix-location";
$w.onReady(function () {
})
export function submit_click(event) {
$w('#button1').onClick(() => {
if ($w("#password").value === $w("#pass2").value) {
wixUsers.register($w('#email').value, $w("#password").value , {
"contactInfo": {
"firstName": $w('#firstName').value,
"lastName": $w('#lastName').value,
"phoneNumber": $w('#phoneNumber').value,
"street": $w('#street').value,
"city": $w('#city').value,
"state": $w('#state').value,
"zipcode": $w('#zipcode').value,
}
})
.then(() =>{ //Here you can also present a pop up succeed message or send the user to different page
$w('#text1').text= "succeed message";
$w('#text1').show()
});
} else {
$w('#text1').text= "Passwords not match";
$w('#text1').show()
$w("#input1").value = "";
$w("#input2").value = "";
}
})
}
So i followed your code example and it only seems to semi work in preview mode. I am not getting any errors in preview other than "Wix code SDK error: The value of memberPassword parameter that is passed to the register method cannot be set to the value “”. Its length must be between 4 and 256. when the passwords do not match. (i also cleared my browser cache also just to make sure it was an issue there.) but it is not working at all in the live site after publishing. When an non-matching password is entered, it clears all filled fields, name, email, passwords, etc, and then follows the wixLocation.to for a successful login, but of course the user is not registered or logged in.
Also when the wrong password is entered the first time, in preview mode, and it displays “password not match”, and then you correct the passwords, the error message stays on the screen but show the success message also.
Here is the code:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com import wixUsers from ‘wix-users’; import wixLocation from “wix-location”; import wixWindow from ‘wix-window’;
$w.onReady( function () {
})
export function submit_click(event) {
$w(‘#submit’).onClick(() => { if ($w(“#password”).value === $w(“#pass2”).value) {
wixUsers.register($w(‘#email’).value, $w(“#password”).value , {
“contactInfo”: {
“firstName”: $w(‘#firstName’).value,
“lastName”: $w(‘#lastName’).value,
“phoneNumber”: $w(‘#phoneNumber’).value,
“street”: $w(‘#street’).value,
“city”: $w(‘#city’).value,
“state”: $w(‘#state’).value,
“zipcode”: $w(‘#zipcode’).value,
}
})
.then(() =>{ //Here you can also present a pop up succeed message or send the user to different page
$w(‘#text44’).text= “You are now Registered”;
$w(‘#text44’).show();
wixLocation.to(“/plans-pricing”);
});
} else {
$w(‘#text43’).text= “Passwords not match”;
$w(‘#text43’).show();
Reference to the shown text, at my code I used for both conditions “success” or “not much” with the same element and only change the text.
In you code, you have two different elements $w(’ #text44 ‘).show() and $w(’ #text43 ').show().
As a result you need to hide each one before presenting the other one.
About the other problems, can you please send the link to your site and specify the name of the page so we can inspect.