Need Help with Custom Registration/Sign-up (Require some field)

Ask the community
,
1

Hi! I would like to require the firstName on my code but whenever I test it, it gives an error but still register a user even without the firstname. How do I ode it that it doesn’t proceed registering so the registrant can fill out the required field? I have been looking the Corvid API and experimented many times but can’t make it to work. Please help. Thank you so much! My code is below:


import wixUsers from 'wix-users';
 import wixWindow from 'wix-window';
 import wixLocation from 'wix-location';

  $w.onReady(function () {
  $w("#registerButton").onClick( (event) => {
 let email = $w("#email").value;
 let password = $w("#password").value;
 let first = $w("#firstName").value;
 let last = $w("#lastName").value;
      $w("#firstName").required = true;
      $w("#email").required = true;
      $w("#password").required = true;
 
wixUsers.register(email, password, {
       contactInfo: {
 "firstName": $w('#firstName').value,
 "lastName": $w('#lastName').value,
       }})
.then( (result) => {
 let resultStatus = result.status;
        wixWindow.lightbox.close();
 })
.catch( (err) => {
     console.log(err);
     $w("#error").expand();
   } )
});
});
2

@freedfoxworldwide You need to actually check for a valid value. In the input box which required = true doesn’t do for you.

The simple test is to use .valid which has some rudimentary checking of what you deem to be a valid value. So for example you can make a field required and so if it doesn’t contain a value then it is NOT valid.

So your code could look like this:

import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#registerButton").onClick( (event) => {
      try {
          // Test each mandatory value for validity
          // We are in a try catch block so ALL errors will be 
          // handled in the catch call - even promise errors
          if (!$w("#email").valid) {
              throw Error("Invalid or Missing Email!");
          } else if (!$w("#password").valid) {
              throw Error("Invalid or Missing Password!");
          } else if (!$w("#firstName").valid) {
              throw Error("Invalid or Missing FirstName!");
          }
    
          // Create convenience variables for the values we need
          let email = $w("#email").value;
          let password = $w("#password").value;
          let first = $w("#firstName").value;
          let last = $w("#lastName").value;
          /* Delete these lines...
           * $w("#firstName").required = true;
           * $w("#email").required = true;
           * $w("#password").required = true;
           */
 
           // Register the user
           wixUsers.register(email, password, {
               contactInfo: {
                   "firstName": first,
                   "lastName": last,
               }
           })
           .then( (result) => {
               let resultStatus = result.status;
               if (resultStatus === "Pending") {
                   console.log("The Site Owner Must approve your request");
               } else if (resultStatus === "Active" && result.sessionToken) {
                   // Logging you in
                   wixUsers.applySessionToken(resultStatus.sessionToken);
                   console.log("You should now be logged in");
               }
               wixWindow.lightbox.close();
           });
       } catch(err) {
             console.log(err);
             $w("#error").text = err.stack ? err.stack : err.message;
             $w("#error").expand();
       }
    });
});

Check out the references:

https://www.wix.com/corvid/reference/wix-users.html#RegistrationResult

3

Thank you! I will check this out.

4

@stcroppe Hi again! It is much better now but the error message is like below. Do you have any idea why? Thank you again for your help.

366×573 43.9 KB

5

I got it to work! I have deleted
err.stack ? err.stack :
What is it for? I am not sure what is it for but the code still works.

6

The error message you pasted above is called a stack trace. It shows which functions called which others to get you to the point of the error. It is useful for debugging and getting to the bottom of errors. Some browsers might not deliver a stack trace and you will only get error.message. So the code basically says

If there is a stack value then use it other wise use the message value.

Another shorthand way to do this is
$w(“#error”).text = err.stack || err.message;

So if err.stack is “truthy” use it OR use err.message.

Or you can simply remove it :wink:

7

Very helpful. Thank you so much!