SA-24357

Summary

For the following out of the box controls, user wants to set the control's border to red whenever the control field would encounter a server-side validation error. 

1. Text Input
2. Date Time
3. Autocomplete
4. Dropdown
5. Text Area
6. Radio Button
7. Checkbox

Error Messages

Not applicable.

Steps to Reproduce

1. Create a section, and include all the above controls in it.
2. Configure server side validation for each control field property.
3. During runtime, submit the form to trigger server side validations.

    

4. Observe that post the Submit event, the borders render without any "error" border.

Root Cause

The error border (post server side validation) is not actually bug, but a business requirement that many users aspire to add in their application forms. The intention kept aside, if a user wants to add border to a control to highlight the same post server side validation, code changes must be made to that control's RUF, to generate class ErrorShade in case of server-side errors. Post this, a control specific css must be added in UserWorkForm that can leverage the ErrorShade function.

Resolution

To display error border for a particular control, apply its corresponding hotfix and add its relevant css to UserWorkForm. Following is the list:
 

Control	Hotfix	css
Text Input	HFix-27399	input[type="text"].ErrorShade{  border: 1px solid red !important;  }
Autocomplete	HFix-27757	input[type="text"].ErrorShade{  border: 1px solid red !important;  }
Date Time	HFix-27761	span.ErrorShade{  border:1px solid red !important;  }
Checkbox	HFix-27762	input[type="checkbox"].ErrorShade{  outline:1px solid red !important;  }
Radio Button	HFix-27763	div.radioTable.ErrorShade{  border: 1px solid red !important;  }
Dropdown	HFix-27879	select.ErrorShade{  border : 1px solid red !important;  }
Text Area	HFix-27880	.TextAreaContainer .ErrorShade{  border: 1px solid red !important;  }

Result: Above controls will render with a (red colour) border when they encounter server side validations.

    

Note: The border size and color can be modified as per the requirement.