Show success and error symbol for each field on-change of field value in Dynamics 365/ PowerApps portals.

Recently I got a requirement where every time an user keys in a wrong email address, the user should get a error notification icon on the control and if the user key in the correct email address, the user should get a success notification on the control.

Very common requirement I shall say but again this is something which does not happen OOB. So let’s see how can we accomplish this.

For this demo I am using an Entity form for contact entity and we shall be playing with the email address of the contact.

In the Custom Javascript section of the Entity Form under “Additional Settings” tab, I write the below code.

// JavaScript source code

$(window).on(“load”, function () {

$e = $(“#emailaddress1”);

$e.addClass(“form-control”);

 

// add the has-feedback class. Without this it won’t work.

$e.closest(“div”).addClass(“has-feedback”);

// show the tick symbol.Hidden to start with.

$e.closest(“div”).append(“<span id=’emailaddress1-success-icon’ class=’glyphicon glyphicon-ok form-control-feedback’ style=’color:green;display:none’></span>”);

// remove symbol. Hidden to start with.

$e.closest(“div”).append(“<span id=’emailaddress1-error-icon’ class=’glyphicon glyphicon-remove form-control-feedback’ style=’color:red;display:none’></span>”);

$e.bind(“change”, emailAddressChanged);

});

function emailAddressChanged() {

var pattern = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

var inputValue = $(“#emailaddress1”).val();

$(“#emailaddress1-success-icon”).hide();

$(“#emailaddress1-error-icon”).hide();

debugger;

if ($.trim(inputValue) !== ”) {

var isInvalid = !pattern.test(inputValue);

if (isInvalid) {

$(“#emailaddress1-success-icon”).hide();

$(“#emailaddress1-error-icon”).show();

}

else {

$(“#emailaddress1-success-icon”).show();

$(“#emailaddress1-error-icon”).hide();

}

}

}

The important stuffs I have put a comment above those lines and highlighted in yellow. As you can see, I have just played around with some bootstrap elements. I save the entity form changes and I clear the portal cache.

On the contact create form below is my experience.

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

Our product offerings:

CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)

Notes Manager (https://debajmecrm.com/add-metadata-to-your-notes-and-attachments-in-dynamics-notes-metadata-manager-from-xrmforyou-com/)

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)