Custom registration page coding

Hello,

I’m trying to create a custom registration page but I don’t know how to make the fields mandatory before registration. Also I would like to display the error message if the field is not filled in.

Example display text if the field is not entered:
First Name field - Please enter your name
Email field - Please enter your email

This is the page I’m trying to code:
https://www.greenmediacreations.com/copy-of-demo

This is the code I’m using right now:

import wixUsers from 'wix-users';
import wixLocation from "wix-location";

$w.onReady(function(){ 
$w('#register').onClick(function (){ 
if ($w("#Password").value === $w("#Password2").value) {
wixUsers.register($w('#Email').value, $w("#Password").value , {
"contactInfo": { 
"firstName": $w('#firstName').value, 
}
})
.then(() =>{wixLocation.to('/demo2'); 
$w('#validationMessages').text= "succeed message";
$w('#validationMessages').hide()
});
} else {
$w('#validationMessages').text= "The password does not match.";
$w('#validationMessages').show()
 
}
})
})

Can anyone help me how to make all the fields mandatory with display message?

Best regards,
Rauno

something like this…

//first we do some styling if no text is entered, make red if blank, make black if text input

if (($w(‘#input1’).value) === “”) {

        $w("#input1").style.borderColor = "rgba(255,0,0,0.5)"; 
    }  **else**  { 
        $w("#input1").style.borderColor = "#C6E2F7"; 

    } 

//then we place a condition before we register

if (
($w(‘#input1’).value !== “”) &&
($w(‘#Password1’).value === $w(‘#Password2’).value)){

//enter code here for registering

}else{
console.log(“issue, user not registered”);
}

You can additionally select the “required” box in the input settings of the user input text box.