How do I show message After user registration

Ask the community
,
1

i have created a custom registration form tha connects to wix CRM, everything works perfect ( below is the code), however i would like to show messages once the submit message is clicked in case the user enter a wrong value. or once the submission is successful. i have tried to read article regarding the validations but i didnt know how to apply it to the code. i would appreciate if someone can help with an example for the validation.

$w.onReady( function () {
$w(‘#submit’).onClick( function () {

     wixUsers.register($w('#email').value, $w('#password').value, {

“contactInfo”: {

“firstName”: $w(‘#name’).value,
“username”: $w(‘#username’).value,
“Phone”: ${$w('#countrycode').value} ${$w('#phone').value},
“reference”: $w(‘#reference’).value,
“DOB”: ${$w('#day').value}/${$w('#month').value}/${$w('#year').value},
“country”: $w(‘#country’).value,
“city”:$w(‘#city’).value,

    }})  



   })

});

2

Dear Nahifa
First of all, remember to read this https://www.wix.com/code/home/forum/community-discussion/wix-code-forum-guidelines-for-posting-a-question. You will get better help and others can benefit from your questions if you have a subject line that tells people what you ask for.

Update your post subject from “hello” to something like “How do I show message efter user registration” that way more people that have that knowledge will help you.

When you use register method you can use it’s promise which will execute after the register is done.

wixUsers.register(email, password, {
    contactInfo: {
        "firstName": firstName,
        "lastName": lastName,
        "phone": phone,
        "nickname": nickname
    }
  } )
  .then( (result) => {
    let resultStatus = result.status;
    // Here you can check and handle if user went ok
    // and show messages or whatever you would like to do
    // $w("#messageBox1").show(); // Show a element example
  } );

Happy coding!

3

Just to help you understand Andreas’ comment regarding a Promise. There are a couple of things that you should get used to doing.

  1. Get used to using the API reference for Wix Code…
    Velo API Reference - Wix.com

So as an example the API reference for wix-users includes register(). The syntax for the register() function tells us that it returns something, that Andreas referenced above, called a Promise. The Promise returns something called a RegistrationResult or it will throw an exception to return an error.

1372×1492 354 KB

You can think of a Promise as a way to track how a function call is progression. These are important because some functions we call need to talk to another computer or program which can take time. When the function call completes it has to keep its promise to you and either give you the result you want OR tell you about an error.
To get the result you add a then() function, which handles the promise, as shown in the example above which gives you an argument called result to work with. The result variable is a RegistrationResult object (see below).
If an error occurs then you use a .catch() function. This catches exceptions and, like the .then() call, gives an argument which contains the error message.

The RegistrationResult:

1372×1526 355 KB

2. Field validations are fairly easy to manage. What you need to do is two things.
a. For each element you want to validate set up the field validation in the element settings:

1372×968 99.9 KB

1372×968 120 KB

b. Then in your code you can check the validity of the inputElement using the valid property:

1372×1526 360 KB

So using the register function in your example you can see if the phone number is valid like this

if ($w('#phone').valid) {
// Do something with a valid phone number
}

Of course you can check multiple input values for validity like this:

if ($w('#phone').valid && $w('#email').valid && $w('#name').valid) {
    // Do something with a valid phone number and email and name
}
  1. If there is a registration error you can handle this in the .catch() function. What you can do is use a lightbox for messages. This can be used for errors or success messages. A lightbox pops up over the screen with a message. It has a control to allow you to remove it. Assuming you have a lightbox called ‘Show Message’, you can show a success or fail message pop up like this:
import wixWindow from 'wix-window';
...

$w.onReady(function () {
    $w('#submit').onClick(submitRegister);
});
    
  
function submitRegister() {
    if (valuesValid()) { 
        let contactToAdd = {
            "firstName": $w('#name').value,
            "username": $w('#username').value,
            "Phone": `${$w('#countrycode').value} ${$w('#phone').value}`,
            "reference": $w('#reference').value,
            "DOB": `${$w('#day').value}/${$w('#month').value}/${$w('#year').value}`, 
            "country": $w('#country').value, 
            "city":$w('#city').value 
        };
                      
        wixUsers.register(
            $w('#email').value,
            $w('#password').value,
            {"contactInfo": contactToAdd})
        .then((result) => {
            // popup Success Message
            popUpMessage("SUCCESS: "+$w('#email').value+" Registered");
        })
        .catch((error) => {
            // popup Error
            popUpMessage(error);
        });
    } else {
        // Missing or invalid property
        popUpMessage("ERROR: Missing or invalid property");
    }
}

function valuesValid() {
    // Add validity checks 
    return $w('#phone').valid &&
           $w('#email').valid &&
           $w('#name').valid;
}

function popUpMessage(message) {
    wixWindow.openLightBox('Show Message', {'message':message});
}
4

@stevendc thank you so much, things are super clear now :slight_smile: