Support Article

On screen Load focus is on the first mandatory field

SA-37121

Summary



User is getting a validation error message when a screen loads and the first field is mandatory and a radio button.

When it loads initially, the focus by defaults to this first radio button.

Immediately it loses focus and it displays a validation error message (mandatory field validation).


Error Messages



Value cannot be blank


Steps to Reproduce

  1. Open a WorkObject and keep the first field as required.
  2. Click anywhere in the UI. Error Message is displayed.


Root Cause



An issue in the error message presentation in Inline and Flexbox option of radiobutton.

Resolution



Perform the following local-change:

1) Add new class "customErrorClass" in "Cell read-write classes" using (Presentation >Advanced Presentation Options >Cell read-write classes) on Radio Button.

2) Create a non-auto generated section and paste below code. (For reference refer "CustomErrorSec" in the instance provided).


<script>
function display_addImageError(error) {
varerrorElement = error.element;
varofflineError = error.errorMessage && error.errorMessage.constructor == Array;
if (!offlineError) {
error.errorMessage = [error.errorMessage];
}
inDynLayout = false,
errorDivs = pega.util.Dom.getElementsById(errorElement.name + "Error");
if (errorDivs != null) {
toggleErrorMessage(errorDivs[0], error, true);
} else {
varerrorDiv = createErrorMarker(error),
errorSpan = errorDiv.getElementsByTagName('span');
varfirstChildElem = pega.util.Dom.getFirstChild(errorElement.parentNode);
varfirstChildElemTemp = pega.util.Dom.getFirstChild(errorElement.parentNode);
varparentElemNode = errorElement.parentNode.nodeName.toLowerCase();

var count = 0;
while (firstChildElemTemp.parentNode && count < 5) {

if (firstChildElemTemp.parentNode.className.indexOf("customErrorClass") != -1 || firstChildElemTemp.parentNode.className.indexOf("content-item") != -1) {
errorDiv.className += " dynamic-icon-error-div";
for (vari = 0; i < errorSpan.length; i++) {
errorSpan[i].className += " dynamic-icon-error";
errorSpan[i]["innerText" in errorSpan[i] ? "innerText" : "textContent"] = error.errorMessage[i];
}
if (firstChildElem.className.indexOf("textAreaStyle") > -1 || firstChildElem.className.indexOf("TextAreaEC") > -1) {
pega.util.Dom.insertAfter(errorDiv, firstChildElem.parentNode);
} else {
if (errorElement.type == "radio") {
pega.util.Dom.insertAfter(errorDiv, pega.util.Dom.getLastChild(errorElement.parentNode.parentNode.parentNode));
} else {
pega.util.Dom.insertAfter(errorDiv, pega.util.Dom.getLastChild(errorElement.parentNode));
}
}

inDynLayout = true;
break;
}
firstChildElemTemp = firstChildElemTemp.parentNode;
count++;
if (count == 5 && firstChildElemTemp.parentNode.className.indexOf("customErrorClass") != -1) {
count--;
}
}

if (!inDynLayout) {
pega.util.Dom.insertBefore(errorDiv, firstChildElem);
}

toggleErrorMessage(errorDiv, error, true);
}
setLabelStyle(errorElement);
}
</script>


3) Add this custom section in the sections where this behavior is expected.

Note: Showing errors in the form of icons for Dynamic Layout with "inline-block" is an expected behavior.

As per your user's, the code has been modified.
​If there are any code changes made in "display_addImageError()" in future in the product, it will not be reflected, if this change is present in the system.

Published April 26, 2017 - Updated May 14, 2017

Have a question? Get answers now.

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