Skip to main content

Notifications

Customer experience | Sales, Customer Insights,...
Suggested answer

Conditional Validation Error Message in Marketing Form

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

We have a single line text field called “Phone Number” that is not required on form submission, but whose value needs to be validated to contain 10 digits to be considered a valid number.

 

I am trying to replicate Dynamics validation popup message:

 pastedimage1622735685180v1.png

I would like to add the “This field is required” popover to Phone number field once it contains data is invalid.

 

I noticed that on submit of the form, the following HTML element is added to the <form> element:

 

<div id="validation-summary">

<p id="error_7f685ebb-7c54-4cff-a1bc-772562d25c38" role="alert" hidden="">E-mail*: This field is required</p>

</div>

 

 

I thought that I could simply add another p tag with a similar id, but the actual id coming from the Phone number field like so:

 

<p id="error_ac6a065d-364e-40d6-9a19-d9bf1ed4aa3e" role="alert" hidden="">Phone Number*: This field is required</p>

 

 

For more context, here’s the actual Phone number field HTML: (notice that I matched the input’s id to the validation p tag id above)

 

<div class="lp-form-field" data-required-field="false">

   <label class="lp-ellipsis" for="ac6a065d-364e-40d6-9a19-d9bf1ed4aa3e" title="">Phone number</label>

   <input class="lp-form-fieldInput phone-number-validation" id="ac6a065d-364e-40d6-9a19-d9bf1ed4aa3e" name="ac6a065d-364e-40d6-9a19-d9bf1ed4aa3e" style="width: 100%; box-sizing: border-box;" title="" type="tel" inputmode="text">

</div>

 

I’m guessing that the div#validation-summary is returned from the server side and there’s no way for me to hack the HTML to get this validation behavior for my other fields that have conditional validation requirements.

 

Here’s my custom validation code that I attach in the Marketing Form raw HTML after the ending </form> tag:

 

<script defer>

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

        if (!jQuery(".phone-number-validation").inputmask("isComplete")) {

            event.preventDefault();

        }

        event.setFormNotification(function (n) {

            console.log(n);

        });

    });

</script>

 

I can prevent the submission and show an alert, but it’s not visually appealing. I’d like to replicate what Microsoft has in place.

 

I tried reading documentation, but it’s very minimal:

https://docs.microsoft.com/en-us/dynamics365/marketing/developer/marketing-form-client-side-extensibility

 

This question is close to what I’m trying to achieve, but I notice it’s adding a custom error message. If this is what I have to do, that’s fine, but I’m trying to use the same UI/UX Microsoft has in place.

https://community.dynamics.com/365/marketing/f/dynamics-365-for-marketing-forum/411731/error-message-in-marketing-form

 

Here’s another great post about how to achieve this, but it looks like Dynamics would block us from trying to replicate its validation UI:

https://community.dynamics.com/365/marketing/f/dynamics-365-for-marketing-forum/395996/adding-fields-validation-using-javascript-to-marketing-form-in-dynamics-365/1069081#1069081

Thank you!

  • Suggested answer
    Nya Profile Picture
    Nya 29,058 on at
    RE: Conditional Validation Error Message in Marketing Form

    Hi Tony,

    Here is an issue about Email Validation, which is similar to your issue.

    (+) Email Validation on Landing Page - Dynamics 365 Marketing Forum Community Forum

     

    You can try to make an alert when the Phone number is not valid refer to the above post.

     

    If this helped you, I'd appreciate it if you'd mark this as a Verified Answer, which may in turn help others as well.

    Best Regards,

    Nya

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Congratulations to the January Top 10 leaders!

Check out the January community rock stars...

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,996 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 230,853 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans