How to display a warning message on the CRM form

We use JavaScript for client side validation on CRM forms. Mostly we use the pop up message box (JavaScript alert function) to display the error/warning messages. The user has to press ok to proceed. If the validation code is running on the formload event then the system will keep poping up the message box everytime the user opens up the record unless the problem is fixed. But if you just want to display a warning message without forcing the user to press ok and fix the problem immediately.

The post is about displaying a warning message without the pop ups.  This solution will display a warning message if the field failed the validation. This does not require any immediate response from the user.

Here is the screen shot of the warning message on account form.

For this solution we need 3 web resources

1. An Image web resource (warning or ! image in front of the message)
2. A HTML web resource
3. A JavaScript web resource

You can download the solution containing these web resources from here. Download the solution and publish it.
Here are steps to add the warning message to an account entity form.

• Open the account entity form in a customise view.
• Add a new section to the general on the form and move it to the top of the tab. Make sure the name of the tab is “general” and the name of section is “sect_alert_notification” as shown in the screen shot. We are using the tab and the section  name in the JavaScript  web resource.
  
  
• Add the “Notification.HTML” web resource to section. The following screen shots display  the properties of the web resource.
  
  
  
• Add the “new_Notification.JS” JavaScript web resource to the entity form
• Call the ShowNotification function on formload event and on onchange event of field you are validating.
  
• Update the validation code as required in "ShowNotification” function.
  

  function ShowNotification() 
  { 
      var Validated= false;
      // Add Validation code Here     
  
  
      if (Validated==false)
       {  
          Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(true);
         
      }
     else
     {
        Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(false);
     }
  }
  

• Publish the customisation and test the solution.

Thanks to my colleague Russel Devine for the code. Please leave the feedback as required.