SA-32011

Summary

User has upgraded their application from PRPC 6.2 SP2 to Pega 7.1.5.

They are using a text input field. On change of the text input , validation is being called.

In Pega 7.1.5, validation mark comes inside the field and few of the initially typed characters are getting blocked. However, previously, in PRPC 6x version, the validation mark appeared outside the field.

Error Messages

Steps to Reproduce

1) Create a section with few input fields. 
2) Call validation on change of the input fields. 
3)Observe that the validation cross mark appears inside the field. 
 

Root Cause

Reasons for this behavior is there is no margin-left attribute set by Pega on the error icon.

However setting this alone is not solving the Users problem.

As they are not using the Labels binding to As the label and field belong to different columns, error icon cannott flow onto different column by changing margin-left.

Resolution

The following script must be added in the userworkform:

<style>
.iconError ,.iconErrorExpanded{
  background-image: url(../images/error_x.gif);
  background-repeat: no-repeat;
  background-position: center center;
  width: 16px;
  height: 16px;
  display: block;
  }
 
.iconErrorDiv {
   /* HFix-6909 Error marker style changes back to 5.5 styles to support inline text-align on cell */
  margin-left: -13px;
  display: block;
  position:relative;
}
 
.iconErrorDiv span{
    position:absolute;
  }
 
span.textAreaExpandStyle {
  vertical-align: top;
  display: inline-block;
  }
 
span.TextAreaContainer .iconErrorDiv {
  margin-top:0;
  }
 
.dynamic-icon-error-div, .gridDefault .dynamic-icon-error-div {
    margin-left: 0px;
    position: static;
}
 
.dynamic-icon-error, .gridDefault .dynamic-icon-error-div > .dynamic-icon-error {
    position: static;
    padding-left: 20px;
    width: auto;
    height: auto;
    background-position: 0% 0%;
}
.dynamic-icon-error-div > .dynamic-icon-error, .gridDefault .dynamic-icon-error-div > .dynamic-icon-error {
    position: static;
    padding-left: 20px;
    width: auto;
    height: auto;
    background-position: 0% 0%;
}
 
.iconError, .iconErrorExpanded {
    background-image: url(images/pzerror_icon_11957587694.png!!.png);
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    text-decoration: inherit;
    text-transform: none;
    color: rgb(255, 0, 0);
}
</style>
<script>
function display_addImageError(error) {  
               var errorElement = error.element;
               var offlineError = 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 {
                              var errorDiv = createErrorMarker(error),
                              errorSpan = errorDiv.getElementsByTagName('span');
                              //errorSpan = pega.util.Dom.getFirstChild(errorDiv);
                              var firstChildElem = pega.util.Dom.getFirstChild(errorElement.parentNode);
                              var firstChildElemTemp = pega.util.Dom.getFirstChild(errorElement.parentNode);
                              var parentElemNode = errorElement.parentNode.nodeName.toLowerCase();
 
                              // display error message below controls in a dynamic layout
                              var count = 0; // avoid infinite loop if not in dynamic layout
                              while(firstChildElemTemp.parentNode && count<5){
          
                                             if(firstChildElemTemp.parentNode.className.indexOf("content-item")!=-1) {
                                                            errorDiv.className += " dynamic-icon-error-div";
                                                            //var iconError= pega.util.Dom.getFirstChild(errorDiv);
                                                            //iconError.className += " dynamic-icon-error";
                                                            //errorSpan.innerHTML=error.errorMessage;
                                                            for(var i=0; i < errorSpan.length; i++){
                                                                           errorSpan[i].className += " dynamic-icon-error";
                                                                           errorSpan[i]["innerText" in errorSpan[i] ? "innerText" : "textContent"]=error.errorMessage[i];
                                                            }
              //errorSpan["innerText" in errorSpan ? "innerText" : "textContent"]=error.errorMessage;
                                                            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(!inDynLayout) {
                                             pega.util.Dom.insertBefore(errorDiv,firstChildElem);
                                             //errorSpan.setAttribute("title", error.errorMessage);
                              }
 
                              toggleErrorMessage(errorDiv,error,true);
               }
               setLabelStyle(errorElement);
}
 
function toggleErrorMessage(errorDiv, error, show) {
               var offlineError = (error.errorMessage && error.errorMessage.constructor == Array);
               if(!offlineError){
                              error.errorMessage = [error.errorMessage];
               }
               var errorDivFirstSpan = errorDiv.getElementsByTagName("SPAN")[0];
               if(show) {
                              var errorElement = error.element;
                              errorDiv.style.display = "";
                              if(errorDivFirstSpan.title.indexOf(error.errorMessage[0])==-1){
 
                                             var errorDivFirstSpanTemp = errorDivFirstSpan;
                                             var count =0;
                                             while(errorDivFirstSpanTemp.parentNode && count<=5){
                    
                                                            if(errorDivFirstSpanTemp.parentNode.className.indexOf("content-item")!=-1){
                                                                           //errorDivFirstSpan.innerHTML= error.errorMessage;        
                  errorDivFirstSpan["innerText" in errorDivFirstSpan ? "innerText" : "textContent"]=error.errorMessage[0];               
                                                                           break;
                                                            }
                                                            errorDivFirstSpanTemp= errorDivFirstSpanTemp.parentNode;
                                                            count++;
 
                                                            if(count==6 && errorDivFirstSpan.title=="") errorDivFirstSpan.title= error.errorMessage[0];
                                                            else if(count==6)errorDivFirstSpan.title+= "\n" + error.errorMessage[0];
                                             }                                                                                        
                              }
                              if(errorDivFirstSpan.className == "inputError"){
                                             pega.util.Dom.setInnerText(errorDivFirstSpan,errorDivFirstSpan.title);
                                                            if(error.element.tagName.toLowerCase() == 'textarea' && error.element.className.indexOf("textAreaStyle") > -1 ) {              
                                                              if(error.element.parentNode.tagName.toLowerCase() == "td"  ) {
                                                                   pega.util.Dom.addClass(pega.util.Dom.getAncestorByTagName(error.element, "TABLE"),"errorShade");
                                                              } else {
                                                              pega.util.Dom.addClass(error.element.parentNode,"errorShade");
                              }
                                                            } else {
                                                              pega.util.Dom.addClass(error.element,"errorShade");
                                                            }
                              }
                              if(errorElement.parentNode.id == "highlight"){
                                             errorElement.prevClassName = errorElement.className;
                                             errorElement.className = "inputHighlight";
                              }
               } else  {
                              var element  = error ;
                              errorDiv.style.display = "none";
                              errorDivFirstSpan.title = "";
                              if(errorDivFirstSpan.className == "inputError"){
                                             pega.util.Dom.setInnerText(errorDivFirstSpan,errorDivFirstSpan.title);
                                                            if(element.tagName.toLowerCase() == 'textarea' && element.className.indexOf("textAreaStyle") > -1 ) {         
                                                              if(element.parentNode.tagName.toLowerCase() == "td"  ) {
                                                                   pega.util.Dom.removeClass(pega.util.Dom.getAncestorByTagName(element, "TABLE"),"errorShade");
                                                              } else {
                                                pega.util.Dom.removeClass(element.parentNode,"errorShade");
                              }
                                                            } else {
                                                              pega.util.Dom.removeClass(element,"errorShade");
                                                            }
                              }
                              if(element.parentNode.id == "highlight"){
                                             element.className = element.prevClassName;
                              }
 
                                            
                              var labelForElement = findLabelFor(error);
              
                              if (labelForElement) {
                                             pega.u.d.removeClass(labelForElement,"labelError");
                              }
 
 
               }
               pega.ui.d.resizeHarness();
}
</script>