Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Incorrect field is highlighted in red for field level errors

SA-14364

Summary



User enters a valid value in the first input field and the user tabs out of the second input field without entering any value. Both fields reference the same property. An error alert is displayed at the second input field correctly, but the label of only the first input field is highlighted in red which is the issue.




Error Messages



Not Applicable


Steps to Reproduce



1. Create a section with a mandatory input.
2. Include the section twice in a wrapper section using different page contexts.
3. At runtime, tab out without entering any input in the input field in the second occurrence of the section. The label in first occurrence of the section is highlighted in red.


Root Cause



When there are multiple controls with the same label on the form with errors, only the first control’s label was highlighted in red.

Resolution



Perform the following local-change by placing the below script in UserWorkForm HTML fragment.

<script> 
function findLabelFor(errorElement) { 
var errorElemParent = errorElement.parentNode; 
var parentTable = errorElement; 
while ((parentTable != null) && ( (parentTable.tagName != "TABLE") || (parentTable.className.indexOf("textAreaExpandStyle")>-1) ) ) { 
parentTable = parentTable.parentNode; 


if(errorElement.className == "Radio" || errorElement.className == "autocomplete_input"){ 
var parentTable = parentTable.parentNode; 
while ((parentTable != null) && (parentTable.tagName != "TABLE")) { 
parentTable = parentTable.parentNode; 



if(!parentTable) 
return ""; 

var labelList = parentTable.getElementsByTagName("LABEL"); 
var labelForElement = null; 
var elemId = errorElement.id; 
if( elemId == "EXPAND" && errorElement.tagName.toLowerCase() == "textarea" && errorElement.DisplayedProperty ) 
elemId = errorElement.DisplayedProperty; 

var duplicateElementsFound = ($("[id=" + elemId + "]").length > 1); 
for (var el= 0;el < labelList.length; el++) { 
labelList[el].htmlFor = labelList[el].htmlFor.substring(labelList[el].htmlFor.indexOf(".") + 1); 
if ((labelList[el].htmlFor == elemId ) && (labelList[el].innerText != "")) { 
/* Localchange : If there is more than one element with the same id, look for the closest */
if(duplicateElementsFound && ($(errorElement).closest(labelList[el].parentNode).length == 0)) 
continue; 
labelForElement = labelList[el]; 
break;    
}    

return labelForElement; 

</script>

Suggest Edit

Published September 30, 2015 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us