web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Conditional Required f...
Power Pages
Unanswered

Conditional Required field by JS

(0) ShareShare
ReportReport
Posted on by 173

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);
 }
}

 

 

 

sdnd2000_0-1711577716430.png

 

Categories:
I have the same question (0)
  • Inogic Profile Picture
    1,135 Super User 2025 Season 2 on at

    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:

    Inogic_0-1711610036902.png

     

    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 Profile Picture
    on at

    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 Profile Picture
    173 on at

    @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 Profile Picture
    1,135 Super User 2025 Season 2 on at

    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 Profile Picture
    173 on at

    @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?

    sdnd2000_0-1712341754104.png

     

  • Verified answer
    Inogic Profile Picture
    1,135 Super User 2025 Season 2 on at

    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:

    Inogic_0-1712571531345.png

     

    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/

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Pages

#1
Jerry-IN Profile Picture

Jerry-IN 71

#2
Fubar Profile Picture

Fubar 62 Super User 2025 Season 2

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard