Adding fields validation using JavaScript to Marketing form in Dynamics 365

(0) Share

Report

Posted on by SivaR

Hi
I created a Marketing form that has email and confirms email addresses.
i added the Marketing form to a Marketing page (landing page).

When a user enters a different value for the "email" and "confirm email" addresses. it should give an error..

To achieve this:
I included the following code in the Marketing page html header.
I didn't get any error when i submit. Please advise me why the error was not displayed when i enter different values to email and confirm email.

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function(event) {

// sample validation - check if

document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'hidden';

var email = document.getElementById('7f685ebb-7c54-4cff-a1bc-772562d25c38').value;

var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').value;

if (email !== confirmEmail ) {

document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'visible';

event.preventDefault(); });

</script>

Fields in the marketing form:

Please advice me what i am missing to make the code work or any suggestion how i can add validation to marketing form fields.

Thank you,

I have the same question (0)

All responses (6)

Answers (1)

cloflyMao 25,210 on at

Like (1)

Report
Hi Siva,

Please open F12 developer tool to check any error in console.

I copied code your posted, it seems that a '}' symbol is missing thus the function(or the if statement) not close.

Your original code:

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function (event) { // sample validation - check if document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'hidden'; var email = document.getElementById('7f685ebb-7c54-4cff-a1bc-772562d25c38').value; var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').value; if (email !== confirmEmail) { document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'visible'; event.preventDefault(); });

Error in console after I copied your code to my marketing page.

Try to add a '}' in code.(I added an alert to detect whether submission is prevented.)

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function (event) { // sample validation - check if document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'hidden'; var email = document.getElementById('7f685ebb-7c54-4cff-a1bc-772562d25c38').value; var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').value; if (email !== confirmEmail) { document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').style.visibility = 'visible'; event.preventDefault(); alert('Submission is not allowed.') } });

Regards,

Clofly

Was this reply helpful? Yes No
SivaR 69 on at

Like (0)

Report

Thank you so much. It got the alert message.

However, how i can display an error message as "Both email and confirm emails should be the same" something like that as attached image.

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report
Hi Siva,

Unfortunately, the validation message is controlled by Dynamics Marketing, our custom validation message will be prevented by form-loader.js.

You could instead append an custom element to Confirm Email field to show custom error message.

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function (event) { var element = document.getElementById('2670328b-2cbc-ea11-a812-000d3ab64f2b'); var err = document.createElement("div"); /** Optional, you can also predefine CSS in your marketing page.(By giving a class name to error message element.) */ var style = ""; style = "border: 1px solid #F2F2F2; "; style = "border-radius: 5px; "; style = "background: #fff; "; style = "color: red; "; style = "padding: 3px; "; style = "font-weight: 400; "; style = "position: relative; "; style = "z-index: 10000; "; style = "bottom: 12px"; err.setAttribute("style", style); element.parentNode.appendChild(err); if (element.value !== "sss@outlook.com") { event.preventDefault(); err.innerText = 'Both email and confirm emails should be the same'; } else { element.parentNode.lastChild.remove(); } });

We can define CSS in marketing page in advance to avoid long value of style variable in function.(By giving a class name to error message element.)

Regards,

Clofly

Was this reply helpful? Yes No
SivaR 69 on at

Like (0)

Report

Thank you for the reply,

I applied the code as below. however, somehow it stopped at the line "confirmEmail.parentNode.appendChild(err);"

alert message after this line does not show up. Not sure why

MsCrmMkt.MsCrmFormLoader.on('formSubmit', function (event) {

// sample validation - check if

var email = document.getElementById('7f685ebb-7c54-4cff-a1bc-772562d25c38').value;

var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').value;

var err = document.createElement("div");

/** Optional, you can also predefine CSS in your marketing page.(By giving a class name to error message element.) */

var style = "";

style += "border: 1px solid #F2F2F2; ";

style += "border-radius: 5px; ";

style += "background: #fff; ";

style += "color: red; ";

style += "padding: 3px; ";

style += "font-weight: 400; ";

style += "position: relative; ";

style += "z-index: 10000; ";

style += "bottom: 12px";

err.setAttribute("style", style);

if (email !== confirmEmail) {

event.preventDefault();

alert(" before confirm===");

confirmEmail.parentNode.appendChild(err);

alert(confirmEmail + "====after confirmEmail");

err.innerText = 'Both email and confirm email should be the same';

} else {

alert(confirmEmail + "====else confirmEmail");

confirmEmail.parentNode.lastChild.remove();

}

});

Was this reply helpful? Yes No
Verified answer

cloflyMao 25,210 on at

Like (0)

Report

Hi Siva,

Because in your code, confirmEmail variable is equal to Confirm Email field value instead of the field node itself, therefor caused the error.

-----------------------------------------------------------------------------------------------------------------------------------

var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127').value;

confirmEmail.parentNode.appendChild(err); -> confirmEmail here is test4@hotmail.com instead of Confirm Email field node object.

-----------------------------------------------------------------------------------------------------------------------------------

My suggestion is that you could remove value attribute to set the confirmEmail variable as a node object(1), then add value attribute back in if conditional statement(2).

1. var confirmEmail = document.getElementById('48aa37a4-e4c2-ea11-a812-000d3a0c8127');

2. if (email.value !== confirmEmail.value)

Regards,

Clofly

Was this reply helpful? Yes No
SivaR 69 on at

Like (0)

Report

Thank you so much. i will try and let you know

Was this reply helpful? Yes No