Question:
I want to make sure each field has data in the Member Account & Profile Info, if it is empty I want it to appear red and with an asterisk to show they need to fill it out (making it sort of mandatory)
I believe the issue I am having in my code is that I can’t reference the ID of the update info button so that it goes through.
Product:
Wix Studio
What are you trying to achieve:
I am trying to make users confirm that all data necessary for my service is entered
What have you already tried:
Something I am hesitant to try although contemplating if there is no way to reference the button is to just recreate the account page with my own button as in wix it seems the rule of thumb is that if it is premade you are going to struggle customising it.
Additional information:
$w.onReady(function () {
validateFields(); // Check fields on load
$w("#updateInfoButton").onClick(() => {
validateFields();
});
});
// Function to validate fields
function validateFields() {
let isValid = true;
// List of required fields
let requiredFields = [
{ id: "#firstName", label: "First Name" },
{ id: "#lastName", label: "Last Name" },
{ id: "#phone", label: "Phone" },
{ id: "#street", label: "Street" },
{ id: "#city", label: "City" },
{ id: "#zipcode", label: "Zipcode" },
{ id: "#country", label: "Country" }
];
// Loop through fields and validate
requiredFields.forEach(field => {
let input = $w(field.id);
if (input.value.trim() === "") {
isValid = false;
input.style.borderColor = "red"; // Make border red
if ($w(field.id + "Asterisk")) $w(field.id + "Asterisk").show(); // Show asterisk if added
} else {
input.style.borderColor = ""; // Reset border color
if ($w(field.id + "Asterisk")) $w(field.id + "Asterisk").hide(); // Hide asterisk if added
}
});
if (!isValid) {
$w("#errorMessage").text = "Please fill in all required fields.";
$w("#errorMessage").show();
} else {
$w("#errorMessage").hide();
console.log("All fields are valid!");
}
}
