Answered

Conditional Required field by JS

(0) Share

Report

Posted on by sdnd2000

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

Categories:

General

All responses (6)

Answers (1)

Verified answer

Inogic 1,023 Super User 2025 Season 1 on at

Like (0)

Report

Re: Conditional Required field by JS

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/
sdnd2000 173 on at

Like (0)

Report

Re: Conditional Required field by JS

@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 1,023 Super User 2025 Season 1 on at

Like (0)

Report

Re: Conditional Required field by JS

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

Like (0)

Report
Re: Conditional Required field by JS

@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>"
GWham1 on at

Like (0)

Report
Re: Conditional Required field by JS

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); }); }
Inogic 1,023 Super User 2025 Season 1 on at

Like (0)

Report
Re: Conditional Required field by JS

Hi @sdnd2000

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

Go to the basic Form.
Select your form.
Select additional settings.
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/