Validator - Highlight field in Red on Error #329

Closed
opened 2026-01-29 17:35:29 +00:00 by claunia · 1 comment
Owner

Originally created by @MSIH on GitHub (Feb 19, 2022).

When Validator finds an error, the field should be highlighted in Red. Currently, an error message is displayed in Red (next to or below the component.

Additional context
UI design suggests that highlighting the fields with errors improves usability.
https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03
https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/

Originally created by @MSIH on GitHub (Feb 19, 2022). When Validator finds an error, the field should be highlighted in Red. Currently, an error message is displayed in Red (next to or below the component. **Additional context** UI design suggests that highlighting the fields with errors improves usability. https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03 https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/
Author
Owner

@MSIH commented on GitHub (Feb 21, 2022):

You closed this with no comment. Would you mind if I try to create a pull request for this feature?
https://forum.radzen.com/t/how-to-show-change-style-around-control-fails-during-form-validation/9958/5?u=barry8schneider

Here is an example for RadzenTextBox:

.rz-textbox.invalid { border: 1px solid red; }

@MSIH commented on GitHub (Feb 21, 2022): You closed this with no comment. Would you mind if I try to create a pull request for this feature? https://forum.radzen.com/t/how-to-show-change-style-around-control-fails-during-form-validation/9958/5?u=barry8schneider Here is an example for RadzenTextBox: ` .rz-textbox.invalid { border: 1px solid red; }`
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#329