As you have not used J. D.'s code example on your page and instead trying to get it to work yourself, I have tested your code and it doesn’t work as you needed to modify it yourself.
I created a blank website with two (2) pages with #title and #email user inputs on the first page and #lfirstName and #lastName on the second page.
I used a dataset called the same as you have used as Customer_Detail, with the user inputs named exactly the same as the field keys from the dataset fields.
For both pages you need the user inputs connected to your dataset through the dataset link on each user input element with the dataset on each page.
For the button you do not connect it to the dataset through the dataset link on the button element.
On the first page in your code, you need to add a link to the second page, second page add a link to third page and so on with the last page having no link on it at all
The only drawback with you modifying J. D.'s code, is that as you are using the same onChange functions that work with his code. However, for your code the user has to click off of the user input box for the submit button to be enabled, so basically once they are done with the user inputs they need to click on the page for the code to register that the user input value has changed
To learn more about this, then see the Wix API reference for onChange.
https://www.wix.com/corvid/reference/$w.ValueMixin.html#onChange
So, the code that you need is as follows.
First page:
import wixData from 'wix-data';
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
let userId = wixUsers.currentUser.id;
let userObj = {};
let inputFields = ["title","email"];
$w.onReady(() => {
$w("#submitButton").disable();
wixData.query("Customer_Detail")
.eq("userId", userId)
.find()
.then(r => {
r.items.length > 0 ? userObj = r.items[0] : userObj.userId = userId;
inputFields.forEach(e => {
$w('#title'),$w('#email').onChange(event => {
if(inputFields.every(e => $w('#title').valid),$w('#email').valid){
inputFields.forEach(e => userObj[e] = $w('#title').value,$w('#email').value);
$w("#submitButton").enable();
} else {
$w("#submitButton").disable();
//Please fill up the details
}
})
})
$w("#submitButton").onClick(event => {
wixData.save("Customer_Detail", userObj)
.then(() => {
console.log("done");
wixLocation.to(`/blank`);
}).catch(err => console.log(err));
})
})
})
Second page (last page for my example):
import wixData from 'wix-data';
import wixUsers from 'wix-users';
let userId = wixUsers.currentUser.id;
let userObj = {};
let inputFields = ["firstName","lastName"];
$w.onReady(() => {
$w("#submitButton").disable();
wixData.query("Customer_Detail")
.eq("userId", userId)
.find()
.then(r => {
r.items.length > 0 ? userObj = r.items[0] : userObj.userId = userId;
inputFields.forEach(e => {
$w('#firstName'),$w('#lastName').onChange(event => {
if(inputFields.every(e => $w('#firstName').valid),$w('#lastName').valid){
inputFields.forEach(e => userObj[e] = $w('#firstName').value,$w('#lastName').value);
$w("#submitButton").enable();
} else {
$w("#submitButton").disable();
//Please fill up the details
}
})
})
$w("#submitButton").onClick(event => {
wixData.save("Customer_Detail", userObj)
.then(() => {
console.log("done");
}).catch(err => console.log(err));
})
})
})
