element.valid always returning true for incorrect data?? (pattern validation)

Ask the community
, ,
1

I’ve tried setting up my first custom signup in a lightbox and things seemed to be working fine at first, I could input an email, username, password and referral code into my form and it all seems to get stored correctly.

My only issue now is when I’m trying to use pattern validation (that I setup with in the input settings in the wix editor) and try referencing that through .valid true is always returned so my signup always goes through. For example I have a minimum length of 5 characters for the username and I can put 3 and the signup still happens as if there was nothing wrong with the data, none of my reject()'s get called. Here is my code:

import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import {searchForUser} from 'backend/checkAccounts'
import {searchForEmail} from 'backend/checkAccounts'
// For full API documentation, including code examples, visit https://wix.to/94BuAAs

$w.onReady(function () {
 // TODO: write your page related code here...

    $w("#signupButton").onClick( () => {
 //Final checks just before data is sent to register.

 let emails = [];
 let user = $w("#username").value;
 let email = $w("#email").value;

        emails.push(email);

 if (user !== "") {
            searchForUser(user)
            .then(result => {
 if (result === "FOUND") {
                    $w("#errorText").text = "Username already exists.";
                }else {
 //Check for duplicate email now:
                    searchForEmail(email)
                    .then(result2 => {
 if (result2 === "FOUND") {
                            $w("#errorText").text = "Email already exists.";
                        }else {
 //Now need to check if email and username are of correct format.
 if ($w("#username").valid && $w("#email").valid) {
 //Both email and password are unique, so can create account:
                                wixUsers.register(email, $w("#password").value, {
 "contactInfo": {
 "username": $w("#username").value,
 "emails": emails,
 "referralCode": $w("#referral").value
                                    }
                                });

                            }else {
 if (!$w("#email").valid) {
                                    $w("#errorText").text = "Email must be of format: user@example.xyz";
                                }else {
                                    $w("#errorText").text = "Username must contain ONLY letters and numbers and be between 5-20 characters.";
                                }
                            }
 
                        }
                    });
                }
            });
        }
    });
});

Am I using .valid incorrectly? Why is it not returning true when I have incorrect data? Any help would be appreciated.