From 59b92b85d197fb9b924099dd1499533496af4ec1 Mon Sep 17 00:00:00 2001 From: Jim Wright Date: Thu, 21 May 2020 16:11:55 +0100 Subject: [PATCH] chore: add brief explanation of hasFeedbackFor and showsFeedbackFor (#720) --- .../validate/stories/Overview.stories.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/validate/stories/Overview.stories.mdx b/packages/validate/stories/Overview.stories.mdx index 92589370b..4eedf97e8 100644 --- a/packages/validate/stories/Overview.stories.mdx +++ b/packages/validate/stories/Overview.stories.mdx @@ -22,6 +22,25 @@ not always lead to the desired User Experience. Together with [interaction states](?path=/docs/forms-system-interaction-states--interaction-states), validity states can determine whether a validation message should be shown along the input field. +## Assessing field validation state programmatically +When a field has validation feedback it can be accessed using the `hasFeedbackFor` and `showsFeedbackFor` properties. +This can be used if the validity of the field is needed in code. + +`hasFeedbackFor` is the state of the field regardless of whether the feedback is shown or not. +`showsFeedbackFor` represents whether or not validation feedback is being shown. This takes into account +interaction state such as a field being `touched` and `dirty`, `prefilled` or `submitted` + +```js +// Field is invalid and has not interacted with +const field = document.querySelector('#my-field'); +field.hasFeedbackFor.includes('error') // returns true +field.showsFeedbackFor.includes('error') // returns false + +// Field invalid, dirty and touched +field.hasFeedbackFor.includes('error') // returns true +field.showsFeedbackFor.includes('error') // returns true +``` + ## Validators All validators are extensions of the `Validator` class. They should be applied to the element implementing