Share
ReportHello everyone,
i have a Marketing form and i need to change the display error message see Picture.
my form :
and i want That my error message be like This:
here is my Code
You’re offline. This is a read only version of the page.
235
Hello everyone,
i have a Marketing form and i need to change the display error message see Picture.
my form :
and i want That my error message be like This:
here is my Code
Hi hedi,
It seems that the form tag is already placed in source code, if so, please change code inside the script tag to the following:
All responses (
Answers (
const form = document.getElementsByTagName("form")[0];
const errorDiv = document.createElement("div");
errorDiv.classList.add("error-div");
const closeButton = document.createElement("span");
closeButton.setAttribute("id", "close");
closeButton.innerText = "x";
errorDiv.appendChild(closeButton);
form.parentNode.insertBefore(errorDiv, form);
document.addEventListener("click", function (e) {
if (e.target && e.target.id == "close") {
errorDiv.classList.remove("active");
}
});
addEvent(form, "submit", function () {
const requiredFields = document.getElementsByClassName("is-required");
const isValid = [];
for (let i = 0; i < requiredFields.length; i ) {
if (requiredFields[i].value === "") {
if (requiredFields[i].parentNode.querySelector("label") !== null) {
var fieldName = requiredFields[i].parentNode.querySelector("label").innerText;
addErrorMessage(i, fieldName);
isValid[i] = false;
}
} else {
clearErrorMessage(i);
isValid[i] = true;
}
}
if (isValid.every((bool) => bool) === false) {
errorDiv.classList.add("active");
return false;
} else {
errorDiv.classList.remove("active");
// Pass validation
return true;
}
})
function addErrorMessage(index, name) {
const errorMsg = document.getElementById("error-" index);
if (errorMsg === null) {
errorDiv.innerHTML = "" name "is required.
";
}
}
function clearErrorMessage(index) {
const errorMsg = document.getElementById("error-" index);
if (errorMsg !== null) {
errorMsg.remove();
}
}
function addEvent(element, event, callback) {
let previousEventCallBack = element["on" event];
element["on" event] = function (e) {
const output = callback(e);
if (output === false) return false;
if (typeof previousEventCallBack === "function") {
output = previousEventCallBack(e);
if (output === false) return false;
}
};
}
Regards,
Clofly
Hi Hedi,
We need to write code to achieve custom form validator, here is my sample based on your description and requirement.
1. In source code of marketing form, add "is-required" as extra class name to input elements that you want to apply custom validator with.
2. Add following code to source code of corresponding marketing page.(You can put it after end tag of body.)
Test
(I add custom validator to Last Name and Email)
1: Leave both of fields value empty
2 Leave Email field empty
3. Leave Last Name empty
Submission will success if both of required fields are filled with data.
Reference:
Extend marketing forms using code (Dynamics 365 Marketing Developer Guide) | Microsoft Docs
Client-side form validation - Learn web development | MDN (mozilla.org)
Regards,
Clofly
Stay up to date on forum activity by subscribing. You can also customize your in-app and email Notification settings across all subscriptions.
#1
André Arnaud de Cal...
291,280
Super User 2024 Season 2
#2
Martin Dráb
230,235
Most Valuable Professional
#3
nmaenpaa
101,156