Conditional Required field by JS

[sdnd2000]

Hi, I am trying to make some custom fields mandatory through JS, there should be a red asterisk sign in the label, however, it takes effective for text field, for lookup and optionset field, the sign didn't get added. I attached the JS code, and results, please advise.

//Make mandatory field
function MakeRequired (fieldName) {
    try {
        debugger;
        if ($("#" + fieldName) != undefined) {
            $("#" + fieldName).prop('required', true);
            $("#" + fieldName).closest(".control").prev().addClass("required");
 
            // Create new validator
            var Requiredvalidator = document.createElement('span');
            Requiredvalidator.style.display = "none";
            Requiredvalidator.id = fieldName + "Validator";
            Requiredvalidator.controltovalidate = fieldName;
            //Requiredvalidator.errormessage =  $("#" + fieldName + "_label").html() + " is a required field.";
            Requiredvalidator.errormessage="<a href='#'"+fieldName+"_label"+">"+$("#" + fieldName + "_label").html() +" is required.</a>"
            Requiredvalidator.initialvalue = "";
            Requiredvalidator.evaluationfunction = function () {
                var value = $("#" + fieldName).val();
                if (value == null || value == "") {
                    return false;
                } else {
                    return true;
                }
            };
 
            // Add the new validator to the page validators array:
            Page_Validators.push(Requiredvalidator);
        }
    }
    catch (error) {
        errorHandler(error);
    }
}

[Inogic]

Hi @sdnd2000 

Based on our understanding, you're trying to make some custom fields mandatory through JavaScript. To achieve this, follow the steps below

1. Go to the basic Form.
2. Select your form.
3. Select additional settings.
4. In the custom JavaScript section, paste the code mentioned below:

if (window.jQuery) {

(function ($) {

$(document).ready(function () {

$("#iric_endtime, #iric_starttime, #iric_account").addClass("required");

$(".required").each(function() {

var labelText = $(this).prev().not('input').not('br').not('select').text();

$(this).prev().not('input').not('br').not('select').html(labelText +

'<span style="color: red;"> *</span>');

});

if (typeof (Page_Validators) ==

'undefined') return;

// Create new validator for end time

var endtimeValidator = document.createElement('span');

endtimeValidator.style.display = "none";

endtimeValidator.id = "endtimeValidator";

endtimeValidator.controltovalidate = "iric_endtime";

// end time field logical name

endtimeValidator.errormessage = "<a href='#iric_endtime_label' referencecontrolid='iric_endtime' onclick='javascript&colon;scrollToAndFocus(\"iric_endtime_label\",\"iric_endtime\");return false;'>End time is a required field.</a>";

endtimeValidator.validationGroup = "";

// Set this if you have set ValidationGroup on the form

endtimeValidator.initialvalue = "";

endtimeValidator.evaluationfunction = function () {

var endtimeValue = $("#iric_endtime").val();

// end time field logical name

if (endtimeValue ==

"") {

return false;

// return false to trigger validation failure

}

return true;

};

// Create new validator for lookup filed

var lookupValidator = document.createElement('span');

lookupValidator.style.display = "none";

lookupValidator.id = "lookupValidator";

lookupValidator.controltovalidate = "iric_account";

// lookup field logical name

lookupValidator.errormessage = "<a href='#iric_account_label' referencecontrolid='iric_account' onclick='javascript&colon;scrollToAndFocus(\"iric_account_label\",\"iric_account\");return false;'>Account is required field.</a>";

lookupValidator.validationGroup = "";

// Set this if you have set ValidationGroup on the form

lookupValidator.initialvalue = "";

lookupValidator.evaluationfunction = function () {

var lookupValue = $("#iric_account").val();

// Lookup field logical name

if (lookupValue ==

"") {

return false;

}

return true;

};

// Add the end time validator to the page validators array

Page_Validators.push(endtimeValidator);

Page_Validators.push(lookupValidator);

});

}(window.jQuery));

}

To reflect the change save and sync

Thanks!

Inogic Professional Service Division

An expert technical extension for your techno-functional business needs

Power Platform/Dynamics 365 CRM

Drop an email at crm@inogic.com

Service:  http://www.inogic.com/services/ 

Power Platform/Dynamics 365 CRM Tips and Tricks:  http://www.inogic.com/blog/

[GWham1]

You could try something like the below:

/***********************************
** SINGLE
***********************************/

$(document).ready(function () {
    addValidator("customerid", "Customer")
});

    function addValidator(fieldName, fieldLabel) {


        if (typeof (Page_Validators) == 'undefined') return;
        // Create new validator
        $("#" + fieldName + "_label").parent().addClass("required");

        var newValidator = document.createElement('span');
        newValidator.style.display = "none";
        newValidator.id = "RequiredFieldValidator" + fieldName;
        newValidator.controltovalidate = "";
        newValidator.errormessage = "<a href='#" + fieldName + "_label'>" + fieldLabel + " is a mandatory field.</a>";
        newValidator.validationGroup = "";
        newValidator.initialvalue = "";
        newValidator.evaluationfunction = function () {
            var value = $("#" + fieldName).val();
            if (value == null || value == "") {
                return false;
            } else {
                return true;
            }
        };

        // Add the new validator to the page validators array:
        Page_Validators.push(newValidator);

        // Wire-up the click event handler of the validation summary link
        $("a[href='#" + fieldName + "_label']").on("click", function () { scrollToAndFocus(fieldName + '_label', fieldName); });
    }

/***********************************
** TWO OPTION
***********************************/

$(document).ready(function () {
    twoOptionValidator ("gw_confirmation", "Confirmation");
});

function twoOptionValidator(fieldName, fieldLabel) {

    if (typeof (Page_Validators) == 'undefined') return;
    // Create new validator

    var newValidator = document.createElement('span');
    newValidator.style.display = "none";
    newValidator.id = "DateFormatValidator" + fieldName;
    newValidator.controltovalidate = "";
    newValidator.errormessage = "<a href='#" + fieldName + "_label'>" + fieldLabel + " must be agreed.</a>";
    newValidator.validationGroup = "";
    newValidator.initialvalue = "";
    newValidator.evaluationfunction = function () {

        if ($("#" + fieldName + "_1").is(':checked')) {
            return true;
        }else{
            return false;
        }
    };
    Page_Validators.push(newValidator);
    $("a[href='#" + fieldName + "_label']").on("click", function () { scrollToAndFocus(fieldName + '_label', fieldName); });
}

[sdnd2000]

@GWham1  Thanks, actually, I am looking to add the onclick js function to the error so that user is able to click the error message and redirect to the field with error. I am struggling with the below code, and always get error, please advise.

Requiredvalidator.errormessage="<a href='#'"+fieldName+"_label"+"referencecontrolid="+fieldName+"onclick='javascript&colon;scrollToAndFocus(\+fieldName+"_label"\,\+fieldName+"_label" \")"+";"+return false";"+">"+$("#" + fieldName + "_label").html() +" is required.</a>"

[Inogic]

Hi @sdnd2000 

Based on our understanding, it appears that there are some syntax errors in your JavaScript code:

 RequiredValidator.errormessage = "<a href='#" + fieldName + "_label' referencecontrolid='" + fieldName + "' onclick='javascript&colon;scrollToAndFocus(\"" + fieldName + "_label\",\"" + fieldName + "\");return false;'>" + $("#" + fieldName + "_label").html() + " is required.</a>";

if (window.jQuery) {

(function ($) {

$(document).ready(function () {

if (typeof (Page_Validators) ==

'undefined') return;

MakeRequired("iric_account");

//change the parameter name with your logical name

function MakeRequired(fieldName) {

try {

if ($("#" + fieldName) !=

undefined) {

$("#" + fieldName).prop('required',

true);

$("#" + fieldName).closest(".control").prev().addClass("required");

// Create new validator

var RequiredValidator = document.createElement('span');

RequiredValidator.style.display = "none";

RequiredValidator.id = fieldName + "Validator";

RequiredValidator.controltovalidate = fieldName;

RequiredValidator.errormessage = "<a href='#" + fieldName +

"_label' referencecontrolid='" + fieldName +

"' onclick='javascript&colon;scrollToAndFocus(\"" + fieldName +

"_label\",\"" + fieldName +

"\");return false;'>" + $("#" + fieldName +

"_label").html() +

" is required.</a>";

RequiredValidator.initialvalue = "";

RequiredValidator.evaluationfunction = function () {

var value = $("#" + fieldName).val();

if (value ==

null || value == "") {

return false;

} else {

return true;

}

};

// Add the new validator to the page validators array

Page_Validators.push(RequiredValidator);

}

} catch (error) {

errorHandler(error);

}

}});

}(window.jQuery));

}

Thanks!

Inogic Professional Service Division

An expert technical extension for your techno-functional business needs

Power Platform/Dynamics 365 CRM

Drop an email at crm@inogic.com

Service:  http://www.inogic.com/services/ 

Power Platform/Dynamics 365 CRM Tips and Tricks:  http://www.inogic.com/blog/

[sdnd2000]

@Inogic Thanks for that. The JS is working, however, it doesn't highlight the field as the below, I do not see any documentation from MS. Any suggestions?

[Inogic · Accepted solution]

Hi @sdnd2000 ,

You need to update the following code to focus on the lookup field when clicking on the error message:

RequiredValidator.errormessage = "<a href='#' onclick='$(\"#" + fieldName + "\").parent().parent().find(\".lookup\").css({\"box-shadow\": \"rgba(3, 102, 214, 0.3) 0px 0.1px 0.3px 1px, rgba(3, 103, 214, 0.3) 0px -1px 1px, rgba(3, 102, 214, 0.3) 0px -1px 0px, rgba(3, 102, 214, 0.3) 0px -1px 0px, rgba(3, 102, 214, 0.3) 3px 3px 7px\"}); return false;'>" + $("#" + fieldName + "_label").html() + " is required.</a>";

Output:

Thanks!

Inogic Professional Service Division

An expert technical extension for your techno-functional business needs

Power Platform/Dynamics 365 CRM

Drop an email at crm@inogic.com

Service:  http://www.inogic.com/services/ 

Power Platform/Dynamics 365 CRM Tips and Tricks:  http://www.inogic.com/blog/