ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add brief explanation of hasFeedbackFor and showsFeedbackFor (#720)

Browse source
This commit is contained in:
Jim Wright 2020-05-21 16:11:55 +01:00 committed by GitHub
parent 7418b8d6bd
commit 59b92b85d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/validate/stories/Overview.stories.mdx
View file

@ -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