I build member own form using {id}, after login user will redirect to their member own form using their unique ID. see following code and attached image.
wixLocation.to(/candidate/${wixUsers.currentUser.id})
When user redirect to dynamic page with from all required fields validation run automatically?
Any help to resolves this issue?
So it looks like you have used the Wix Member Profile example as shown here.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
Note that there are two dynamic pages for each user in this tutorial.
The first dynamic page is read only and is their Profile page which displays all of their info.
The second dynamic page is read and write and is their Profile Update page where they can edit any user input that is on that page.
Once the user then clicks on save, all their alerations are saved to the dataset from that tutorial and the user is moved back to the Profile page which shows the corrected info.
So, when you first use this tutorial you will be wanting to show the user their own Profile page first and so use the Wix Location API and the to() function to move the user onto their own dynamic page, as shown in the tutorial…
export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
Don’t send the user straight onto the Profile Update page first.
When your user clicks on the button your user inputs are automatically checking if they have been filled in or not, is that correct?
If it is, then we need to know if you have used code for this or not.
If you have not, then you have simply got the required option ticked in the user input settings and you need to decide if you want it required or not.
See step three from here.
Otherwise, if you have used code, then the validation will check each user input that you have put code for.
I follow same article you given and create member area pages.
I created 2 pages 1) Dashboard 2) candidate{id} dynamic page
Dashboard page has button to modify their own form. user has to click on that button to redirect the editable page. Where they can set their detail and save the form. but when user land on editale form validation fire.
When user login or register I check if user data exist in collection. if not then create user data row with email and id. all other fields are blank.
But when they edit profile, i need to set validation for required fields. but its automatically fire on page load.
Here is link https://restartrecruit.wixsite.com/dev1
you can register as candidate login and see validation is fire.
I need to fix any how and also want to keep validation as well on edit page.
Waiting for your reply.
I have used that tutorial myself many of times and if used correctly the user inputs on the Update page should only run the validation when the user clicks on the save button to update them.
How is your user input form made up, did you make it up yourself as a multistage form or by using a slideshow with your user inputs on each slide etc?
Or have you used Wix Forms app to do your form for you?
Also, please post what code you have used for this so far in a code block.
thanks for your reply.
I build a form using the inputs element and button(Submit). Submit button link to the dataset(Read and Write permission). Next Button is a simple button.
I don’t use the Wix form app or multistage or slideshow.
I use the same tutorial. The difference is, I set js code in the Site tab as my button set on the header as always visible on all the pages.
Here is the Code:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
$w.onReady( function () {
//TODO: write your page related code here…
if (wixUsers.currentUser.loggedIn) {
$w( “#loginbtn” ).label = “Logout” ;
}
else {
$w( “#loginbtn” ).label = “Candidate Login” ;
}
});
export function loginbtn_click(event) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w( “#loginbtn” ).label = “Candidate Login” ;
} )
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( { “mode” : “login” } )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query( “CollectionName” )
.eq( “_id” , userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0 ) {
// create an item
const toInsert = {
“_id” : userId,
“email” : userEmail
};
// add the item to the collection
wixData.insert( " CollectionName " , toInsert)
. catch ( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w( “#loginbtn” ).label = “Logout” ;
wixLocation.to( ‘/dashboard’ );
} )
. catch ( (err) => {
console.log(err);
} );
}
}
So, to get this correct,
You have the first page which is read only that is your Members ‘Dashboard’ page which has a button to go to the second page so that the user can edit the info on that page.
You have the second page which is read and write which is where your users can edit, change or add etc any of the info and then it is saved and added again to the dataset that you have used for this tutorial.
These two lines here which contain your dataset…
return wixData.query("CollectionName")
//and//
wixData.insert("CollectionName", toInsert)
Is your dataset actually called Collection Name in your Site Structure?
Also, you don’t need the Wix Location to() line at the end.
// update buttons accordingly
$w("#loginbtn").label = "Logout";
wixLocation.to('/dashboard');
This is going to log your current user out and then move them to your dynamic Members Dashboard page.
The only issue here will be that as the user is now logged out, they won’t have the permissions to view that page and so will likely end up with getting a 403 error shown.
Unless of course that this dashboard page here is a static dashboard page and not a dynamic page that is member only etc.
Also, the whole point of this tutorial is to have a button for users to use to login with and to show hidden elements like a profile button and the button label to change to logout.
Then for the button to log the user out when they click on it again and to hide the hidden elements and to change the button label back to login.
Therefore, you really should be having another button like the profile button in the tutorial to take them from this login page to their own dashboard page, as shown in the tutorial.
When the profile button is clicked, we use an event handler to send members to their personal profile page.
We add an event handler by selecting the profile button and we use the Properties panel to add a handler for the onClick event.
Then we add the event handler code, which looks like this:
export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
This will then move the user onto their own dynamic page which uses their userId so that only that specific member with that userId can see that data etc.
Like I said, I have done this for a start of a basic members only page with lightboxes for login and signup with the page only showing a logo and the login button when the user first views it.
The code when the user logs in then showing the hidden member elements and allowing the member to then do certain things etc.
Then the member has to click again on the logout button and the page will then hide again all the member only elements and just have the logo and login button shown on the page again.
So, for this to work the login lightbox will open when the user clicks on the login button and once the user is logged in as a member, the login lightbox will automatically close and refresh the page so that the code will run again and show the hidden member parts and change the button label to logout.
If you stay on the same page and don’t refresh the page, then the user will still be logged in as a member, however the code on the page won’t be able to run again and it won’t recognise the user now being logged in as member and so the hidden member elements etc will not be shown.
If you move the user onto another page after they log themselves in, then the code will work perfectly as it should as the member will be moved onto another page and would have to navigate back to this page, so the code will run once again when the page is reloaded.
Code used on page
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter").show();
}
} );
export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter").show();
} );
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
} )
.catch( (err) => {
console.log(err);
} );
}
}
export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}
export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}
export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}
Code used for login lightbox that reloads the same page.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_onclick(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url); //This reloads the same page and allows code to show hidden member parts.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
Code used for login lightbox that will move user onto another page after login.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_click(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixLocation.to("/account/my-account"); //Change the URL ending to whatever page you want to send the user to after they log in.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
I replaced my actual collection name to CollectionName
@givemeawhisky
// update buttons accordingly
$w(“#loginbtn”).label = “Logout”;
wixLocation.to(‘/dashboard’);
if i remove wixlocation then how user redirect to their dashboard after login?
I want to redirect the user after login to Dashboard then how can I do it?
I use default Login/Sign up option
Like I said above, the tutorial has it’s own login page which is in the tutorial itself.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area#login-page
With the tutorial, the user will login and then the profile button will be shown.
Then the member clicks on the profile button and it takes them to their profile page, which should be the first read only page through the code below.
export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
When the member wants to logout, then simply come back to this page and click on logout and the member will be logged out and the button label changes back to login.
I have used this page as a starting point for a simple members only page which as stated already, only has a logo and the login button to anybody that views the members page.
Then, once the member has logged themselves in the page will then show the members only bits like buttons which allows the member user to move onto other certain member only pages etc.
The only difference is that I am using my own lightboxes for login and signup, so I can use code in the lightbox to do something after the user has logged in and in this case it is to move the user onto a certain page.
If you want to move your members onto their own dynamic dashboard page after they have logged themselves in, then you will need to use code to do that on login.
@givemeawhisky I fixed the issue using onBeforeSave () function. I set validation on before form data save to collection.
$w( “#dynamicDataset” ).onBeforeSave(()=>{
$w( “#cstatus” ).onCustomValidation( (value, reject) => {
if ( value === “” ){
reject( “Citizenship status required” );
}
} );
$w( “#anotheragency” ).onCustomValidation( (value, reject) => {
if ( value === “” ){
reject( “Another agency required” );
}
} );
if (!($w( ‘#cstatus’ ).valid && $w( “#anotheragency” ).valid )){
return false ;
} else {
wixLocation.to(/c-education/${wixUsers.currentUser.id})
}
})