Set custom warning message in business process flow

Question

I have a business process flow that has a "special" validation. At least one of 3 steps have to be set to "Yes" to be able to continue to the next stage.

Here's my handler on stage change.

var subStageRequirements = new Array();
subStageRequirements.push({ stage: 0, fields: ['new_is_project_scope_defined_substage'] });
subStageRequirements.push({ stage: 1, fields: ['new_is_demo_1_substage', 'new_is_demo_2_substage', 'new_is_selection_srv_outlined_substage'] });
subStageRequirements.push({ stage: 2, fields: ['new_is_proposal_substage', 'new_is_negotiation_substage'] });


function onStageChange(context) {

    var stage = context.getEventArgs().getStage();
    var stageCategory = stage.getCategory().getValue();
    var direction = context.getEventArgs().getDirection();

    if (direction == "Next") {

        //validate requirements on previous field...
        var valid = false;
        var req = subStageRequirements[stageCategory - 1];

        for (var i = 0; i <= req.fields.length - 1; i++) {
            if (Xrm.Page.getAttribute(req.fields[i]).getValue()) {
                valid = true;
                break;
            }
        }

        if (!valid) {

            Xrm.Page.data.process.movePrevious(function (result) {
                if (result != "success") {
                    alert('Error forcing back to previous step: ' + result + '. Have fun...');
                }

                var messageArea = $(window.parent.document).find('.processWarningBar');
                messageArea.css('display', 'block');

                var textArea = $(window.parent.document).find('.processWarningBar-Text');

                textArea.attr('title', 'At least one sales sub-stage has to be selected to move on to next sales stage.');
                textArea.text('At least one sales sub-stage has to be selected to move on to next sales stage.');

                setTimeout(function () {
                    var messageArea = $(window.parent.document).find('.processWarningBar');
                    messageArea.css('display', 'none');
                }, 5000);
            });


        }

    }
}

As you see, once the stage has changed, I check if the steps in the previous stage (current stage - 1, in position) at least have one true value.

If not, I move back a stage (movePrevious) and then engage in some jQuery trickery... Which has some downsides (both error and warning icon are showing in the error, I have to hide the error div myself, sometimes when the validation passes and I move on to the next stage, the custom error message will flicker and disappear).

I'm trying to get this part to show a custom message:

Any better way to do this ? I'm thinking of the functions CRM itself calls when showing its own default message. I tried to ferret them out, but they seem well hidden.

EDIT

I changed the validation code to this as proposed by answer below:

if (!valid) {

    Xrm.Page.data.process.movePrevious(function (result) {
        if (result != "success") {
            alert('Error forcing back to previous step: ' + result + '. Have fun...');
        }

        Xrm.Page.ui.setFormNotification('At least one sales sub-stage has to be selected to move on to next sales stage.', 'ERROR', 'subStageMessage');


        setTimeout(function () {
            Xrm.Page.ui.clearFormNotification('subStageMessage');
        }, 5000);

    });

    return;
}
else
{
    Xrm.Page.ui.clearFormNotification('subStageMessage'); //trying to hide it once the previous stage has passed validation, but error message is still shown...
}

The issue now is that the message is shown even when moving to the next stage. When validation fails, the user is sent back to previous step, then the message is shown. When the user completes the missing steps and moves to the next stage, even though the code that shows the message isn't executed, the message is still shown for another 5 seconds (??)

I'm using CRM 2016, and this is for the Opportunity entity.

Answer 1

I've decided to use Notify.js and by doing the same using this web resource, the problem of reappearing notification is solved.

if (!valid) {

    Xrm.Page.data.process.movePrevious(function (result) {
        Notify.add('<b>At least one sales sub-stage has to be selected to move on to next sales stage.</b>', 'WARNING', 'subStageMessage', null);
    });

 }
 else {
     //if previous stage's steps were all valid, remove all notifications
     Notify.remove();
 }